27/32 100% Оцените код. Буду благодарен за конструктивную критику!

Курсы §15. Сетки
1 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
            <header class='clearfix'>
                <div class="layout-positioner">
                    <div class="layout-column column1 red">Header</div>
                </div>
                    <div class="layout-column column2 blue">
                        <div class="layout-positioner">Menu</div></div>
                        <div class="layout-positioner">
                    <div class="layout-column column3 red">Promo 1</div>
                    <div class="layout-column column4 red">Promo 2</div>
                </div>
            </header>
            <main class="clearfix">
                <div class="layout-positioner">
                     <div class="layout-column column1 blue">Left</div>
                     <div class="layout-column column2 blue">Main</div>
                     <div class="layout-column column3 blue">Right</div>
                </div>
             </main>
            <footer>
                 <div class="layout-positioner">
                    <div class="layout-column"> Footer</div>
              </div>
        </footer>
    
    </body>
</html>
2

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

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

header,
footer {
background: #34495e;
}

.layout-column.red {
background: #c0392b;
}

.layout-column.blue {
background: #3498DB;
}

.layout-positioner {
width: 350px;
margin-left: auto;
margin-right: auto;
}

.layout-column {
box-sizing: border-box;
padding: 5px;
margin-bottom: 10px;
}

header .column2 .layout-positioner {
padding-left: 10px;
}

header .column1 {
min-height: 35px;
}

header .column2 {
min-height: 35px;

}

header .column3 {
float: left;
min-height: 60px;
width:170px;

}

header .column4 {
float: right;
min-height: 60px;
width:170px;
}

main .layout-column {
margin-top: 10px;
margin-left: 10px;
min-height: 110px;
}

main .column1 {
float:left;
width: 70px;
margin-left: 0;

}

main .column2 {
float:left;
width:190px ;

}

main .column3 {
float: right;
width: 70px;

}

footer .layout-column {
min-height: 35px;
}

header {
padding-top: 10px;
}

.clearfix::after {
content:"";
display: table;
clear: both;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

3

clearfix добавляется непосредственному родителю плавающих блоков. То есть вот здесь :point_down:, а не для header, как вы написали.

Если в блоке с тремя колонками использовать только float: left; то код будет короче.
Использование классов с названиями red и blue - не очень хорошая практика. Вам стоит разнообразить свой код другими именами классов. Лучше один класс у элемента с отличным от других названием, чем три одинаковых у каждого с различием в порядковом номере.
Возможно, будет интересно: https://github.com/yoksel/common-words

4

Спасибо!