Как правильно выставить блоки относительно контейнера?
Помогите пожалуйста. Разметил такую шапку, и вот header__content его текст должен быть слева по центру. В общем, я прокомментировал разметку. Не могу понять, что не так делаю.
.container {
max-width: 1100px;
margin: 0 auto;
}
.header {
/* Тут картинка */
background-color: red;
}
.header__wrap {
display: flex;
flex-direction: column;
min-height: 500px;
}
.header__top {
background-color: rgba(0, 0, 0, 0.4);
}
.header__row {
flex: 1 1 0;
}
.header__content {
display: flex;
}
<div class="header">
<div class="header__wrap">
<div class="header__top">
<div class="container">
<a href="" class="logo">Лого</a>
<nav class="header__menu">...</nav>
</div>
</div>
<div class="header__row">
<div class="header__content content-header">
<div class="container">
<!-- должен быть слева по центру -->
<div class="content-header__text">
<h1>text</h1>
</div>
<!-- должен быть справа внизу относительно контейнера -->
<div class="content-header__actions">
<a href="" class="btn">Кнопка</a>
</div>
</div>
</div>
</div>
</div>
</div>
Источник: Stack Overflow на русском