Всем привет, ситуацию следующая. Пытаюсь расположить в меню logo и остальную информацию по разным сторонам блока
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1440px;
overflow-x: hidden;
background-position: 50% 5%;
margin: 0 auto;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 10px;
margin-top: 32px;
margin-left: 56px;
margin-right: 56px;
animation: up 2s ease-in-out;
}
<div class="header">
<div class="header__logo">
<a href="/" class="header__logo-link">
<img src="img/svg/Vector.svg" alt=""></a>
</div>
<div class="phone">
<p id="phone_number">999999999999999</p>
<p id="free">Бесплатно для Марса</p>
</div>
</div>
Как указала в коде боди флексовое с выравниванием элементов по центру, а вот хедер вертикально стоит по центру, а по горизонтали элементы должны быть расположены у краев блока, но они все равно находятся в центре. Если в боди поменять значение display на block, то элементы в header расположатся по краям, как и надо. Вопрос почему так? Перечитала на несколько раз значения у свойства display так и не поняла своей ошибки.
max-width
- это не размер, это ограничение. Размер же по ширине задаётся с помощью свойстваwidth
и идти должно сразу или ниже ограничений.