.header {
общие_свойства_для_всех_заголовков
}
.header_red {
свойства_только_для_заголовка_этого_цвета
}
.header_green {
свойства_только_для_заголовка_этого_цвета
}
.header_blue {
свойства_только_для_заголовка_этого_цвета
}<div class="header header_red"></div>
<div class="header header_green"></div>
<div class="header header_blue"></div><div class="wrapper">
<div class="left">LEFT</div>
<div class="center">CENTER</div>
<div class="right">RIGHT</div>
</div>.wrapper {
position: relative;
width: 100%;
height: 50px;
background-color: bisque;
}
.left {
float: left;
}
.center {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
.right {
float: right;
}SHIFT + CTRL + I и задавайте нужное расширение для тестов. А для верстки прописывайте в стилях ширину/высоту в процентах. Используйте медиа-запросы для задания стиля в зависимости от расширения монитора. Да и просто для начала загуглите - адаптивная верстка flex добавляйте свойство flex-flow: column nowrap говорящее о том, что элементы должны располагаться по вертикали. Но у вас вообще непонятный сумбур какой-то. Для чего эта куча div, которая там не нужна. Можно сделать проще - https://codepen.io/anon/pen/ErwLZy position: relative у элемента <ul> в .mainmenu. Ну а по хорошему конечно надо переверстать все, как уже и посоветовали :) <div> поверх картинки в случае необходимости. Так же в случае недоступности сервера картинки не будет появляться значок ошибки загрузки изображения, как при использовании <img>. Ну и немного сократится количество прописанных классов в CSS.