[27/32] Пожалуйста, оцените код

Курсы §15. Сетки
1 
<html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
   <div class="header">
    <div class="layout-positioner">   
    <div class="layout-column layout-column-1"> Header</div>
    </div>
    </div>
   <div class="menu"><div class="layout-positioner"> Menu</div></div>
   <div class="header">
       <div class="layout-positioner"> 
<div class="layout-column layout-column-2 p1">Promo 1</div>
<div class="layout-column layout-column-2"> Promo 2</div>
</div>
</div>
   <div class="features">
       <div class="layout-positioner">
    <div class="layout-column e-1"> Left</div>
      <div class="layout-column e-2">Main</div>
     <div class="layout-column e-1"> Right</div>
     </div>
     </div>
    <div class="footer"><div class="layout-positioner">Footer</div></div>
</body>

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.header{
background:#34495e;
padding: 10px 0;
}
.header .layout-column{
background: #c0392b;
padding: 5px;
}
.layout-positioner{
margin: 0 auto;
width:350px;
}
.layout-positioner::after{
content: “”;
display: table;
clear: both;
}

.header .layout-column-1{
min-height:25px;
}
.menu{
background: #3498DB;
min-height:25px;
padding: 5px;
padding-left:15px;
}
.header .layout-column-2{
float:left;
min-height:50px;
width:160px;

}
.p1{
margin-right:10px;
}
.features{
margin:10px 0;
}
.features .layout-column{
background: #3498DB;
float:left;
min-height:100px;

}
.e-1{
width:60px;
padding: 5px;
}
.e-2{
width:180px;
margin:0 10px;
padding: 5px;
}
.footer{
padding: 5px;
background:#34495e;
padding-left:15px;
min-height:25px;
}

2

Ребята, у меня тоже 100%

Испытание: строим сетку
Header
Menu
Promo 1
Promo 2
Left
Main
Right
Footer
_____________________________________________________________________-___________ html, body { margin: 0; padding: 0; }

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.wrapper{width: 450px;margin: 0 auto;

}
.clearfix::after {
display: table;
content: “”;
clear: both;
}
span{padding:5px;}

.header{background:#34495e;color: white;min-height: 55px;padding-top:10px;}
.layout-column1{background:#c0392b;min-height: 35px;margin-left:50px;margin-right:50px;margin-bottom:10px;}
.layout-columnx{background:#c0392b;padding-top:5px;padding-left:5px;}

.Menu{background:#3498DB;min-height: 35px;}
.layout-column2{float:left;padding-left:55px;padding-top:5px;}
.Promo{background:#34495e;color: white;min-height: 70px;padding-top:10px;}
.layout-column3{background: #c0392b;min-height: 60px;float:left;margin-left:50px;width: 170px;}

.layout-column4{background: #c0392b;min-height: 60px;float:right;margin-right:50px; width: 170px;}

.features{color: white;min-height: 120px;background:white;padding-top:10px;text-align:}
.layout-column5{background:#3498DB;min-height: 110px;float:left;margin-left:50px;width: 70px;}
.layout-column6{background:#3498DB;min-height: 110px;float:left;margin-left:10px;width: 190px;}
.layout-column7{background:#3498DB;min-height: 110px;float:right;margin-right:50px;width: 70px;margin-left:10px;}
.footer{background:#34495e;min-height: 35px;}
.layout-column8{float:left;padding-left:55px;padding-top:5px;}
.Promo clearfix::after {
content: ""
display: table;
clear: both;
}
.layout-column3x{padding-top:5px;}
.layout-column4x{padding-top:5px;}
.layout-column5x{padding-top:5px;}
.layout-column6x{padding-top:5px;}
.layout-column7x{padding-top:5px;}