27/32 испытание на 100%. Необходимы советы

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

Всем доброго времени суток! Закончил испытание 27/32 на 100%. Хотелось бы услышать критику/советы, о том, как можно было бы сделать красивее. Вот то, что получилось у меня.

  <div class="layout-positioner">
    <div class="layout layout-header">
      Header
    </div>
    </div>
    <div class="layout layout-menu">
      <div class="layout-positioner">
        <div class="menu">
      Menu
        </div>
      </div>
    </div>
    <div class="layout-positioner">
    <div class="promo">
      <div class="layout layout-promo1">
        Promo 1
      </div>
      <div class="layout layout-promo2">
        Promo 2
      </div>
    </div>
  </div>
</div>
<div class="features">
  <div class="layout-positioner">
    <div class="layout-column layout-column1">
      Left
    </div>
    <div class="layout-column layout-column2">
      Main
    </div>
    <div class="layout-column layout-column3"> 
      Right
    </div>
  </div>
</div>
 <div class="layout-footer">
  <div class="layout-positioner">
  	<div class="footer">
  	  Footer
  	  </div>
  </div>
</div>

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

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

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

.header {
background-color: #34495e;
padding: 10px 0;
margin-bottom: 10px;
}
.layout-positioner {
margin: 0 auto;
width: 350px;
}

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

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

.layout-menu {
background-color: #3498db;
height: 35px;
margin-bottom: 10px;
}
.menu {
padding: 5px;
}

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

.layout-promo2 {
background-color: #c0392b;
float: left;
height: 50px;
width: 160px;
padding: 5px;
}

.layout-column {
background-color: #3498db;
height: 100px;
}

.layout-column1 {
float: left;
width: 60px;
padding: 5px;
margin-right: 10px;
}

.layout-column2 {
float: left;
width: 180px;
margin-right: 10px;
padding: 5px;
}

.layout-column3 {
float: left;
width: 60px;
padding: 5px;
}

.layout-footer {
background-color: #34495e;
margin-top: 10px;
}

.footer {
padding: 5px;
height: 25px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/

Сводка

Этот текст будет скрыт

2

Я так сделал и все ок!

Испытание: строим сетку
Header
Menu
Promo 1
Promo 2
Left
Main
Right
Footer

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

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

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
.header {
background-color:#34495e;
padding:10px 0;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.layout-positioner::after {
content:"";
display:table;
clear:both;
}
.layout-head {
min-height:25px;
margin-bottom:10px;
padding:5px 5px;
background-color:#c0392b;
}
.header .menu {
min-height:25px;
margin-bottom:10px;
padding:5px 55px;
background-color:#3498db;
}
.header .promo-1 {
float:left;
width:160px;
margin-right:10px;
min-height:50px;
padding:5px 5px;
background-color:#c0392b;

}
.header .promo-2 {
float:left;
width:160px;
min-height:50px;
padding:5px 5px;
background-color:#c0392b;
}
.features {
padding:10px 0;
}
.features .layout-left{
float:left;
width:60px;
margin-right:10px;
min-height:100px;
padding:5px 5px;
background-color:#3498db;
}
.features .layout-main{
float:left;
width:180px;
margin-right:10px;
min-height:100px;
padding:5px 5px;
background-color:#3498db;
}
.features .layout-right{
float:left;
width:60px;
min-height:100px;
padding:5px 5px;
background-color:#3498db;
}
.footer {
padding:5px 55px;
background-color:#34495e;
min-height:30px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/