Испытание: строим сетку [27/32] 100% , прошу проверить, все ли усвоил и можно ли упростить?

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

Если найдется человек , который найдет ошибку в подходе и поможет усовершенствовать код, буду очень благодарен.

Испытание: строим сетку 
            <div class="head">
                <div class="layout-positioner">
                <div class="header">
                Header
                </div>
            </div>
            </div>
            <div class="menu">
                Menu
            </div>
            <div class="promobox">
                <div class="layout-positioner">
                <div class="promo1">
                    Promo 1
                </div>    
                <div class="promo2">
                    Promo 2
                </div>  
                </div>
            </div>
        
        <div class="layout-positioner side">
            <div class="sidebar">
                <div class="left-main clearfix">
                    <div class="left">
                        Left
                    </div>
                    <div class="main">
                        Main
                    </div>
                </div>
                <div class="right">
                    Right
                </div>
            </div>
        </div>
        <div class="footer">
            Footer
        </div>
    
</body>
2

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.clearfix::after {
display:table;
content:"";
clear:both;
}

.layout-positioner {
width:350px;
margin:0 auto;
}
.layout-positioner::after {
display:table;
content:"";
clear:both;
}

.head {
background-color:#34495e;
padding:10px;
}
.header {
background-color:#c0392b;
min-height:35px;
width:350px;
padding:5px;
box-sizing:border-box;
}
.menu {
background-color:#3498DB;
min-height:25px;
padding:5px 55px;
}
.promobox {
background-color:#34495e;
padding:10px;

}
.promobox .promo1 {
width:170px;
float:left;
background-color:#c0392b;
min-height:60px;
padding:5px;
box-sizing:border-box;
}
.promobox .promo2 {
width:170px;
float:right;
background-color:#c0392b;
min-height:60px;
padding:5px;
box-sizing:border-box;
}
.side {
margin-top:10px;
margin-bottom:10px;
}
.sidebar {

}
.sidebar .left-main {
width:270px;
float:left;
}
.sidebar .left {
float:left;
width:70px;
min-height:110px;
background-color:#3498DB;
margin-right:10px;
padding:5px;
box-sizing:border-box;
}
.sidebar .main {
margin-left:80px;
min-height:110px;
background-color:#3498DB;
padding:5px;
box-sizing:border-box;
}
.sidebar .right {
width:70px;
float:right;
min-height:110px;
background-color:#3498DB;
margin-left:10px;
padding:5px;
box-sizing:border-box;
}
.footer {
background-color:#34495e;
min-height:25px;
padding:5px 55px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

3

Это вообще не нужно.

Если бы задали float, то отступ не понадобился бы.

Содержимое меню и футера тоже должно быть отцентровано.