Сетки. Испытание 27/32. 100%. Очень интересно услышать критику :)

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

В первую очередь, спасибо каждому, кто заглянул!
Возможно кому-то мой код даже и окажется полезным :smile:
Но я не очень уверен в чистоте и правильности реализации некоторых решений, по этому был бы очень рад услышать критику)

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="layout-positioner">
      <div class="layout-header">
        Header
      </div>
      </div>
      <div class="layout-menu">
        <div class="layout-positioner">
        Menu
        </div>
      </div>
      <div class="layout-positioner">
      <div class="layout-promo">
        Promo 1
      </div>
      <div class="layout-promo">
        Promo 2
      </div>
      </div>
    </div>
    <div class="container">
      <div class="layout-positioner">
        <div class="layout-block">
          Left
        </div>
        <div class="layout-block layout-main">
          Main
        </div>
        <div class="layout-block">
          Right
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="layout-positioner">
      Footer
      </div>
    </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 – синий
*/

.layout-positioner {
  width: 350px;
  margin: 0 auto;
  /*border: 1px dashed yellow;*/
  
}

.layout-positioner:after {
  content: "";
  display: table;
  clear: both;
}

.layout-positioner div:last-child {
  margin-right: 0;
}

.header {
  background-color: #34495e;
  padding: 10px 0;
  margin-bottom: 10px; 
}

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

.header .layout-header {
  width: 340px;
  height: 25px;
  background-color: #c0392b;
  padding: 5px;
  margin-bottom: 10px;
}

.header .layout-menu,
.footer {
  height: 25px;
  background-color: #3498db;
  padding: 5px;
  padding-left: 15px;
  margin-bottom: 10px;
}

.header .layout-promo {
  width: 160px;
  height: 50px;
  background-color: #c0392b;
  padding: 5px;
  margin-right: 10px;
  float: left;
}

.container {
  /*border: 1px dashed black;*/
  margin-bottom: 10px;
}

.container .layout-block {
  float: left;
  width: 60px;
  height: 100px;
  background-color: #3498db;
  padding: 5px;
  margin-right: 10px;
}

.container .layout-main {
  width: 180px;
}

.footer {
  background-color: #34495e;
  margin-bottom: 0;
}