Сетки. Испытание: строим сетку |27/32| Хотелось бы услышать критику кода.

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

Я ж об этом и говорю.

Вопрос стоял так: “достаточно ли их добавить только самому главному родителю”.
Ну я попробовал – сработать-то сработало, но это скорее всего частный случай.

2 лайка
23

Приветствую. Хотелось-бы услышать критику своего кода.

HTML 
 <!DOCTYPE html>
 <html lang="ru">
   <head>
     <title>Испытание: строим сетку</title>
     <meta charset="utf-8">
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div class="head clearfix">
       <div class="center">
         <div class="layout-1">
           Header
         </div>
       </div>
       <div class="layout-2">
         Menu
       </div>
       <div class="center">
         <div class="layout-3">
           Promo 1
         </div>
         <div class="layout-3">
           Promo 2
         </div>
       </div>
     </div>
     <div class="middle clearfix">
       <div class="center">
         <div class="layout-1">
           Left
         </div>
         <div class="layout-2">
           Main
         </div>
         <div class="layout-3">
           Right
         </div>
       </div>
     </div>
     <div class="footer">
       Footer
     </div>
   </body>
 </html>
CSS 
html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 450px;
  height: 335px;

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}

/*
  Используемые цвета:
  #34495e – мокрый асфальт
  #c0392b – красный
  #3498db – синий
*/
div.head {
  background-color: #34495e;
  height: 170px;
}
.center {
  margin: 0px auto;
  width: 350px;
  padding: 10px 0px;
}
.head .layout-1 {
  height: 25px;
  background-color: #c0392b;
  padding: 5px;
}
.head .layout-2 {
  background-color: #3498db;
  height: 25px;
  padding: 5px 55px;
}
.head .layout-3 {
  padding: 5px;
  background-color: #c0392b;
  float: left;
  width: 160px;
  margin-right: 10px;
  height: 50px;
}
.head .layout-3:last-child {
  margin-right: 0px;
}
.middle .center > div {
  background-color: #3498db;
  float: left;
  height: 100px;
  margin-right: 10px;
  width: 60px;
  padding: 5px;
}
.middle .center .layout-2 {
  width: 180px;
}
.middle .center > div:last-child {
  margin-right: 0px;
}
.footer {
  background-color: #34495e;
  margin-top: 10px;
  padding: 5px 55px;
  height: 40px;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
24

Ошибки есть.
Часть из них рассматриваются выше, в этой ветке…
Прочие легко найти в других, поиском…