[27/32] "Испытание: Строим сетку" 100%, как можно упростить/оптимизировать?

Курсы §15. Сетки
1 
<!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="header-logo">Header</div>
      </div>
      <div class="menu">Menu</div>
      <div class="promo">
        <div class="layout-positioner">
          <div class="layout-column">Promo 1</div>
          <div class="layout-column">Promo 2</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="layout-positioner">
        <div class="layout-column layout-column-1">Left</div>
        <div class="layout-column layout-column-2">Main</div>
        <div class="layout-column layout-column-3">Right</div>
      </div>
    </div>
    <div class="footer">
      <div class="layout-positioner">
        <div class="footer-logo">Footer</div>
      </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;  
}
.layout-positioner::after{
  content: "";
  display: table;
  clear: both;
}
.header{
 background-color: #34495e;
 padding-top: 10px;
 min-height: 160px;
}
.header-logo{
  background-color: #c0392b;
  padding: 5px;
  min-height: 25px;
}
.menu{
  background-color: #3498db;
  padding: 5px 55px;
  margin-top: 10px;
  min-height: 25px;
}
.promo .layout-column{
  float: left;
  margin: 10px 0px;
  padding: 5px;
  min-height: 50px;
  width: 160px;
  background-color: #c0392b;
 
}
.promo .layout-column:last-child{
  margin-left: 10px; 
}
.content{
  min-height: 100px;
}
.content .layout-column{
  padding: 5px;
  margin: 10px 0px;
  min-height: 100px;
  background-color: #3498db;
}
.content .layout-column-1{
  float: left;
  width: 60px
}
.content .layout-column-2{
  float: left;
  margin-left: 10px;
  width: 180px;
}
.content .layout-column-3{
  float: right;
  margin-left: 10px;
  width: 60px;
}
.footer{
  padding: 5px 55px;
  min-height: 30px;
  background-color: #34495e;
}
2
  1. если делаешь обертку layout-positioner, то делай тогда ее уже для всех блоков, так будет логичнее. Почему у footer она есть, а у menu нет?
  2. в promo правильнее сделано (или ближе, чем в примере) .promo .layout-column {float: left; …}, а в контенте зачем-то float-left сделан для каждого layout-column-1 -2 -3.
    Если рассматривать с точки единообразия, то, как мне кажется, проще делать и для .promo layout-column, и для .content layout-column свойство {float: left; …}, а в layout-column-1 -2 -3 только задавать ширину блока