Сетки 27/32. Испытание пройдено. Но как?

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

Прокомментируйте, пожалуйста, мой код.

<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header block">
      <div class="layout-header block">Header</div>
      <div class="layout-menu block">Menu</div>
      <div class="layout-promo block">
        <div class="layout-promo1">Promo 1</div>
        <div class="layout-promo2">Promo 2</div>
      </div>
    </div>
    <div class="block left">Left</div>
    <div class="main block">Main</div>
    <div class="right block">Right</div>
    <div class="footer">Footer</div>
  </body>
</html>

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

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


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

.header {
  background-color: #34495e;
  min-height: 160px;
  padding-top: 10px;
  }
  
.block {
  margin-bottom: 10px;
  }
  
.layout-header {
  background-color: #c0392b;
  width: 345px;
  min-height: 30px;
  margin-left: 50px;
  padding-top: 5px;
  padding-left: 5px;
  }
  

.layout-menu {
    background-color: #3498db;
    min-height: 20px;
    padding: 5px 0 10px 55px;
    }
    
.layout-promo {
  margin-left: 50px;
}
    
.layout-promo1 {
  float: left;
  width: 165px;
  min-height:55px;
  background-color: #c0392b;
  padding-top: 5px;
  padding-left: 5px;
}
    
.layout-promo2 {
  float: right;
  width: 165px;
  min-height: 55px;
  background-color: #c0392b;
  margin-right: 50px;
  padding-top: 5px;
  padding-left: 5px;
  clear: right;
}

.left {
  float: left;
  width: 65px;
  min-height: 105px;
  margin-left: 50px;
  background-color: #3498db;
  padding-top: 5px;
  padding-left: 5px;
  margin-right: 10px;
  }
  
.main {
  width: 185px;
  float: left;
  min-height: 105px;
  background-color: #3498db;
  padding-top: 5px;
  padding-left: 5px;
  margin-right: 10px;
  }

.right {
  float: right;
  width: 65px;
  min-height: 105px;
  margin-right: 50px;
  background-color: #3498db;
  padding-top: 5px;
  padding-left: 5px;
  }
  
.footer {
  clear: both;
  background-color: #34495e;
  min-height: 30px;
  padding-top: 5px;
  padding-left: 55px;
  }
2

Много ошибок.

Желательно курс пройти заново, и разобраться как работает .layout-positioner в предыдущем задании (26/32).

3

Ошибок много, а не одной не описано. Я так не узнаю, на что особенно внимание обратить((

4

Сетка всегда должна оставаться по середине окна, с равномерными отступами слева и справа.
Уберите или закомментируйте ширину в body – сетка развалиться.
Поэтому и было предложено разобраться с центровщиком.
Структура HTML должна быть похожа на структуру предыдущего задания…
Например, футер лучше сделать так:

<div class="footer-wrapper">
    <div class="layout-positioner">
         <div class="footer">Footer</div>
    </div>
</div>
5

Спасибо большое))