Сетки. 27/32 100% Проверьте код, или как обоитись без селектора .head

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

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

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

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
.bg{
background-color: #34495e;
}

.bg2{
background-color: #3498DB;
}

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

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

.header{
background-color: #c0392b;
padding:5px;
min-height: 25px;
margin: 5px 0 10px; /* если верхний внутренний отступ убрать, внешний верхний =10px(смотри внизу селектор .head), то наверху белая полоса, как обойтись без него (.head)?? */
}

.menu{
padding: 5px;
min-height: 25px;
}

.promo1 {
background-color: #c0392b;
padding: 5px;
margin: 10px 10px 10px 0;
width: 160px;
min-height: 50px;

float: left;

}

.promo2 {
background-color: #c0392b;
padding: 5px;
margin: 10px 0;
width: 160px;
min-height: 50px;

float: right;

}

.left{
background-color: #3498DB;
float: left;
padding: 5px;
width: 60px;
height: 100px;
margin: 10px 10px 10px 0;
}

.main{
background-color: #3498DB;
float: left;
padding: 5px;
width: 180px;
height: 100px;
margin: 10px 10px 10px 0;
}

.right{
background-color: #3498DB;
float: right;
padding: 5px;
width: 60px;
height: 100px;
margin: 10px 0;
}

.footer{
padding: 5px;
min-height: 25px;
}

.head {
padding-top: 5px;
}

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

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

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
.bg{
background-color: #34495e;
}

.bg2{
background-color: #3498DB;
}

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

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

.header{
background-color: #c0392b;
padding:5px;
min-height: 25px;
margin: 5px 0 10px;
}

.menu{
padding: 5px;
min-height: 25px;
}

.promo1 {
background-color: #c0392b;
padding: 5px;
margin: 10px 10px 10px 0;
width: 160px;
min-height: 50px;

float: left;

}

.promo2 {
background-color: #c0392b;
padding: 5px;
margin: 10px 0;
width: 160px;
min-height: 50px;

float: right;

}

.left{
background-color: #3498DB;
float: left;
padding: 5px;
width: 60px;
height: 100px;
margin: 10px 10px 10px 0;
}

.main{
background-color: #3498DB;
float: left;
padding: 5px;
width: 180px;
height: 100px;
margin: 10px 10px 10px 0;
}

.right{
background-color: #3498DB;
float: right;
padding: 5px;
width: 60px;
height: 100px;
margin: 10px 0;
}

.footer{
padding: 5px;
min-height: 25px;
}

.head {
padding-top: 5px; /* без него наверху белая полоска отступа, как решить проблему изящно и просто не ломая код?*/
}

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