Как сделать container?

Question

[axblue]

Всем привет! Начал изучать флексбоксы и столкнулся с проблемой не могу сделать обёртку(container/wrapper) для сайта: Есть шапка сайта:
растянутая на весь экран, в ней должна быть обертка в 1170px, что бы отцентрировать лого и навигацию. Но суть в том, что у меня лого и навигация это два флекса, container считается родительским для них и тут проблема:

.header {
    background: #2d2d30;
    height: 100px;
    min-width: 430px;
}

.container {
    display: flex;
    height: 100%;   
    max-width: 1170px;
    min-width: 130px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    width: 73px;
    height: 31px;

}

.header-nav {
    display: flex;
}

.nav-item {
    display: flex;   
    color: #d5d5d5;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
    margin-left: 55px;
    letter-spacing: 3px;
}

Если делать так, то всё норм, но дело в том, что мне container нужно использовать на всем сайте для центровки элементов, а блоки растягивать на всю ширину окна. Как сделать чтобы header был бы родительским для .logo и .nav, а .container просто (width:1170px; margin:0 auto;)

Answer 1

[Максим Тимофеев]

Создать еще один класс

Comments

[axblue]

Я так и думал, прост большая вложенность трохи получается

[Максим Тимофеев]

И что? Кто-то Вас накажет за это? К тому де у Вас добавится всего один уровень.