[27/32] 100% Что может быть не так с таким кодом?

Курсы §15. Сетки
1

Доброго дня!
Прошел испытание на 100%, но все-таки кажется, что что-то не то.
Посмотрел другие темы по этому заданию, поэтому и сложилось такое впечатление.
Подскажите пожалуйста, что может быть не так и с какими ошибками могу столкнуться с таким кодом?

    <div class="main-header">
        <div class="header">
          Header  
        </div>
        <div class="menu">
          Menu
        </div>
        <div class="promo1">
            Promo 1
        </div>
        <div class="promo2">
         Promo 2
        </div>
    </div>
    
    <div class="main-content">
        <div class="left">
            Left
        </div>
        <div class="main">
            Main
        </div>
        <div class="right">
            Right
        </div>
    </div>
    
    <div class="footer">
        Footer
    </div>

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

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

.main-header {
width: 450px;
min-height: 170px;
padding-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;
background-color: #34495e;
}

.header {
width: 350px;
min-height: 35px;
margin-left: auto;
margin-right: auto;
padding-left: 5px;
padding-top: 5px;
margin-bottom: 10px;
box-sizing: border-box;
background-color: #c0392b;
}

.menu {
width: 450px;
min-height: 35px;
padding-left: 55px;
padding-top: 5px;
margin-bottom: 10px;
box-sizing: border-box;
background-color: #3498DB;
}

.promo1,
.promo2 {
width: 170px;
min-height: 60px;
padding-top: 5px;
padding-left: 5px;
box-sizing: border-box;
display: inline-block;
background-color: #c0392b;
}

.promo1 {
margin-left: 50px;
}

.promo2 {
margin-left: 7px;
}

.left,
.main,
.right {
display: inline-block;
box-sizing: border-box;
background-color: #3498DB;
}

.left {
width: 70px;
min-height: 110px;
margin-left: 50px;
padding-top: 5px;
padding-left: 5px;
margin-right: 10px;
float: left;
}

.main {
width: 190px;
min-height: 110px;
float: left;
padding-top: 5px;
padding-left: 5px;
}

.right {
width: 70px;
min-height: 110px;
margin-left: 10px;
padding-top: 5px;
padding-left: 5px;
}

.main-content {
margin-bottom: 10px;
box-sizing: border-box;
}

.footer {
min-height: 35px;
width: 450px;
padding-left: 55px;
padding-top: 5px;
clear: both;
box-sizing: border-box;
background-color: #34495e;
}

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

2

У вас отсутствует центровщик содержимого. А значит ваша сетка не масштабируется. Если ширина body изменится, всё “поплывет”.
Здесь вы используете inline-block, а ниже для каждого блока в отдельности уже float. В чем причина?

Посмотрите еще несколько тем:
[27/32] Прошу указать на недостатки верстки
[27/32] 100%. Прошу посмотреть код и указать на минусы и их последствия при верстке.
Прошу советов по грамотному написанию кода

3

Про центровщик понял, уяснил. Попробую еще разок с ним сделать.
Видимо я сначала указал display: inline-block; , а потом стал флоаты пихать.
Спасибо за отклик.

4

подумайте ещё как обойтись без этой записи, учитывая, что все отступы по заданию должны быть кратны 5.

5

Сам удивлен, что так получилось)). Спасибо, буду думать как так вышло и исправлять.