Стандартная структура кода. Получается при увеличение содержимое выравнивается по центру. А при уменьшении мастаба оно выравнивается по центру, а потом в лево как мне и нужно. Но вот почему-то не сжимаются по крайне мере header и footer.
<body>
<div class="layout">
<div id="header">
<!--Содержимое-->
</div>
<div id="main">
<!--Содержимое-->
</div>
<div id="footer">
<!--Содержимое-->
</div>
</body>
* {
margin: 0;
padding: 0;
}
body {
background: #2C2C54;
font-family: 'Gilroy-Regular', sans-serif;
}
.layout {
width: 1660px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
row-gap: 100px;
margin: auto;
}
Вид header с размерами в нем элементов:
Первоначально я пробывал структуру следующую: body с display: flex и justify-content: center, и в нем был layout. Причем header и footer нормально сжимались, а main нет. Только если вынести все div из main, то тогда вроде все было ок, но мне эта стркутура не нраилась, т.к после макс сжатия все не смещалось в лево, а продолжало в центр и небыло возможности прокрутить влево.
Средний
