Search the Community

Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в max-width ,при заданной ширине, не хочет работать изменение отступов (padding и margin), хотя flex-direction: column; работает. Жуткое ощущение глупой ошибки ,которую не могу найти. Заранее спасибо за помощь. Ниже HTML и CSS код: <header> <div class="header"> <div class="wrap"> <div class="logo header_left"> <a href="#"> <img src="images/logo.png" alt="Логотип"> </a> </div> <div class="header_right"> <div id="topmenu"> <p> <a href="#">About</a> <span>/</span> <a href="#">Blog</a> <span>/</span> <a href="#">Contact</a> <span>/</span> </p> </div> <div id="social"> <a class="twitter" href="#"></a> <a class="vimeo" href="#"></a> <a class="facebook" href="#"></a> <a class="instagram" href="#"></a> <a class="dribbble" href="#"></a> <a class="reddit" href="#"></a> </div> </div> </div> </div> </header> ——————————————————————————————————————————————————-- #container { margin: 0 auto; } #container .header { border-bottom: 1px solid #bfbfbf; box-shadow: 0 0 3px #dbdbdb; padding-top: 6px; } #container .header .wrap { display: flex; justify-content: space-between; padding: 0; } @media (max-width: 650px) { .header .wrap { flex-direction: column; padding: 0 3px; margin-bottom: 5px; } .header #socials { margin-left: 5px; } .header #socials a:last-child { margin-right: 2px;; } } #container .header .header_left { align-self: center; } #container .header .header_right { display: flex; justify-content: space-between; } #container #topmenu { color: #8e8e8e; padding-top: 6px; } #container #topmenu a { color: #8e8e8e; text-decoration: none; } #container #topmenu a:hover { color: #dd5555; } #container #social { display: flex; margin-left: 20px; margin-right: 50px; } #social a { margin-top: 9px; margin: 8px 10px; } .twitter { background: url("../images/twitter_un.png") no-repeat; height: 11px; width: 13px; cursor: pointer; } .twitter:hover { background: url("../images/twitter.png") no-repeat; height: 11px; width: 13px; } .dribbble { background: url("../images/dribbble_un.png") no-repeat; height: 13px; width: 13px; cursor: pointer; } .dribbble:hover { background: url("../images/dribbble.png") no-repeat; height: 13px; width: 13px; } .vimeo { background: url("../images/vimeo_un.png") no-repeat; height: 12px; width: 13px; cursor: pointer; } .vimeo:hover { background: url("../images/vimeo.png") no-repeat; height: 12px; width: 13px; } .facebook { background: url("../images/facebook_un.png") no-repeat; height: 13px; width: 7px; cursor: pointer; } .facebook:hover { background: url("../images/facebook.png") no-repeat; height: 13px; width: 7px; } .instagram { background: url("../images/instagram_un.png") no-repeat; height: 12px; width: 12px; cursor: pointer; } .instagram:hover { background: url("../images/instagram.png") no-repeat; height: 12px; width: 12px; } .reddit { background: url("../images/reddit_un.png") no-repeat; height: 11px; width: 13px; cursor: pointer; } .reddit:hover { background: url("../images/reddit.png") no-repeat; height: 11px; width: 13px; }

Доброго времени суток. Столкнулся с такой проблемой! https://jsfiddle.net/ysrg47Lh/, когда я делаю ширину левого и правого сайдбара в процентах то у меня все получается и блоки плавают как нужно, но стоит мне задать минимальную ширину левого и правого блока как правый блок смещается в низ под контент. В итоге я не могу сделать так что бы левый и правый сайдбар был фиксированной ширины а контент принимал размер в зависимости от экрана и при этом не скидывал правый сайдбар под себя.