[27/32] Проверьте, оптимально ли это решение или нет?

Курсы §15. Сетки
1
Испытание: строим сетку 
    <div class="header1 pos">
        <div class="header pos2">Header</div>
    </div>
    <div class="header2 pos">
        <div class="menu pos2">Menu</div>
    </div>
    <div class="header3 pos">
            <div class="promo1 pos2">Promo 1</div>
            <div class="promo2 pos2">Promo 2</div>
    </div>
    
    <div class="main pos">
        <div class="main-left pos2">Left</div>
        <div class="main-center pos2">Main</div>
        <div class="main-right pos2">Right</div>
    </div>
    
    <div class="footer pos">
        <div class="footer-footer pos2">Footer</div>
    </div>
</body>

html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

.pos {
padding: 10px 50px;
box-sizing: border-box;
}

.pos2 {
padding: 5px;
box-sizing: border-box;
}

.header1 {
height: 55px;
background: #34495e;
}

.header2 {
height: 35px;
background: #3498DB;
padding-top: 0;
padding-bottom: 0;
}

.header3 {
height: 80px;
background: #34495e;
}

.header {
background: #c0392b;
height: 35px;
}

.promo1, .promo2 {
height: 60px;
width: 170px;
background: #c0392b;
}

.promo1 {
float: left;
}

.promo2 {
float: right;
}

.main-left, .main-center, .main-right {
background: #3498DB;
margin-right: 10px;
height: 110px;
}

.main-left {
float: left;
width: 70px;
}

.main-center {
float: left;
width: 190px;
}

.main-right {
float: right;
width: 70px;
margin-right: 0;
}

.main::after {
display: table;
content: “”;
clear: both;
}

.footer {
background: #34495e;
padding-top: 0;
padding-bottom: 0;
height: 40px;
}

2

Это не центровщик. Почитайте темы по этому заданию. Вчера было две.

3

для центровки нужно margin: auto; написать?

4

Да, и указать ширину центровщика.

5

Понял, спасибо)

6

Не ленитесь на начальном этапе обучения логично называть классы, дальше будет сложнее переучиться