Испытание [27/32] получил 100% совпадение, но хорош ли код

Просьба дать комментарии по коду.
Хоть строк кода получилось не так много, все же думаю есть моменты, которые можно описать более надежно.

<body>
    <div class='header'>
        <div class="layout-positioner">
        <div class='red header-lay'>Header </div>
        </div>
    </div>
    <div class='blue Menu'>
        <div class="layout-positioner">
        <div class='Menu-lay'>Menu</div>
        </div>
    </div>    
    
    <div class='promo'>
        <div class="layout-positioner">
        <div class='red promo1'> Promo 1</div>
        <div class='red promo2'> Promo 2</div>           
        </div>
    </div>   
    
    <div class='main'>
        <div class="layout-positioner">
        <div class='blue main-lay'> Left</div>
        <div class='blue main-lay main1'> Main</div>           
        <div class='blue main-lay'> Right</div>             
        </div>
    </div>         

    <div class='footer'>
        <div class="layout-positioner">
        <div class='footer-lay'>Footer</div>
        </div>
    </div> 
</body>

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

.layout-positioner
{width: 350px;
margin:0px auto;
padding:0px;}

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

.header,.promo,.footer
{background-color:#34495e;}
.blue
{background-color:#3498DB;}
.red
{background-color:#c0392b;}

.header,.promo
{padding:10px;}

.header-lay
{height: 25px;
padding:5px;}

.Menu-lay,.footer-lay
{height: 25px;
padding:5px;}

.promo1 {float:left;}
.promo2 {float:right;}

.promo1,.promo2
{height: 50px;
width:160px;
padding:5px;}

.main-lay
{float:left;
height: 100px;
width: 60px;
margin-top:10px;
margin-bottom:10px;
margin-right:10px;
padding:5px;}

.blue:last-child{ margin-right:0px;}
.main1 {width: 180px;}

Выделять отдельные классы для фона блоков не стоит, высоты лучше заменить на min-height. А в целом хорошо получилось.

Спасибо