Сетки / Испытание: строим сетку [27/32] прошу проверить код выдаёт 100%

Курсы
1 
<div class="Header">
        <div class="layout-position">
            <div class="Header-top column">
                Header
            </div>

            <div class="Menu column">
                Menu
                </div>
            <div class="Promo1 column">
                Promo 1
            </div>

            <div class="Promo2 column">
                Promo 2
            </div>
        </div>
  </div>   

    <div class="layout-column">

     <div class="layout-position">
          <div class="Left column">
                Left
            </div>

            <div class="Main column">
                Main
            </div>

        <div class="Right column">
                Right
            </div>
     </div>     
 </div>
 
 <div class="Footer">
     <div class="layout-position">
         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 {
padding: 5px;
}

.Header, .Footer {
background-color: #34495e;
}

.layout-position {
width: 360px;
margin: 0px auto;
}

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

.column {
padding: 5px;
margin: 5px;
}

.Header .Header-top {
background-color: #c0392b;
min-height: 25px;
}

.Header .Menu {
background-color: #3498DB;
min-height: 25px;
width: 390px;
margin-left: -50px;
margin-top: 10px;
padding-left: 60px;
}

.Header .Promo1, .Promo2 {
background-color: #c0392b;
min-height: 50px;
width: 160px;
}

.Header .Promo1 {
float: left;
}

.Header .Promo2 {
float: right;
}

.layout-column {
margin-top: 5px;
margin-bottom: 5px;
}

.Left, .Main {
background-color: #3498DB;
float: left;
margin-right: 5px;
}

.Right {
background-color: #3498DB;
float: right;
width: 60px;
height: 100px;
}

.Left {
width: 60px;
height: 100px;
}

.Main {
width: 180px;
height: 100px;
}

.Footer {
min-height: 45px;
padding-left: 20px;
padding-top: 5px;
}[quote=“Alex79, post:1, topic:5928, full:true”]

Испытание: строим сетку
Header
Menu
Promo 1
Promo 2 
 <div class="layout-column">
     <div class="layout-position">
          <div class="Left column">
                Left
            </div>
            <div class="Main column">
                Main
            </div>
            <div class="Right column">
                Right
            </div>
     </div>     
 </div>
 
 <div class="Footer">
     <div class="layout-position">
         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 {
padding: 5px;
}

.Header, .Footer {
background-color: #34495e;
}

.layout-position {
width: 360px;
margin: 0px auto;
}

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

.column {
padding: 5px;
margin: 5px;
}

.Header .Header-top {
background-color: #c0392b;
min-height: 25px;
}

.Header .Menu {
background-color: #3498DB;
min-height: 25px;
width: 390px;
margin-left: -50px;
margin-top: 10px;
padding-left: 60px;
}

.Header .Promo1, .Promo2 {
background-color: #c0392b;
min-height: 50px;
width: 160px;
}

.Header .Promo1 {
float: left;
}

.Header .Promo2 {
float: right;
}

.layout-column {
margin-top: 5px;
margin-bottom: 5px;
}

.Left, .Main {
background-color: #3498DB;
float: left;
margin-right: 5px;
}

.Right {
background-color: #3498DB;
float: right;
width: 60px;
height: 100px;
}

.Left {
width: 60px;
height: 100px;
}

.Main {
width: 180px;
height: 100px;
}

.Footer {
min-height: 45px;
padding-left: 20px;
padding-top: 5px;
}
[/quote]