27/32[100%] посмотрите качество кода

Курсы §15. Сетки
1 
<body>
<div class="head1">
        <div class="top l-p">
                <div class="header">
                    Header
                </div>
        </div>
        <div class="menu">
            Menu
        </div>
        <div class="features l-p">
                <div class="promo promo1">
                    Promo 1
                </div>
                <div class="promo promo2">
                    Promo 2
                </div>
        </div>
</div>
<div class="features l-p">
        <div class="col left">
            Left
        </div>
        <div class="col main">
            Main
        </div>
        <div class="col right">
            Right
        </div>
</div>
<div class="footer">
    Footer
</div>
</body>

==============================================================

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

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

.l-p::after {
display: table;
content: “”;
clear: both;
}
.head1 {
margin-bottom:10px;
padding-top:10px;
color:white;
background:#34495e;
padding-bottom:10px;
}
.top {
width:350px;
background:#c0392b;
min-height:35px;

}
.header {
padding-top: 5px;
padding-left: 5px;
}
.menu {
background-color:#3498DB;
margin-top:10px;
min-height:30px;
margin-bottom:10px;
padding-top: 5px;
padding-left:55px;
}
.promo {
background:#c0392b;
width: 165px;
min-height: 55px;
}
.promo1 {

float:left;
padding-top: 5px;
padding-left: 5px;
margin-left:40px;
}
.promo2 {
float:right;
padding-top: 5px;
padding-left: 5px;
margin-right:40px;
}
.col {
width:65px;
min-height:105px;
background:#3498DB;
margin-left:10px;
}
.left{
float:left;
margin-left:40px;
padding-top: 5px;
padding-left: 5px;
}
.main {
float:left;
width:185px;
padding-top: 5px;
padding-left: 5px;
}
.right {
float:left;
padding-top: 5px;
padding-left: 5px;
}
.footer {
background:#34495e;
margin-top:10px;
min-height:30px;
margin-bottom:10px;
padding-top: 5px;
padding-left:55px;
}

2

Ширина .l-p подобрана неправильно, из-за этого прописываете margin-ы по 40px.
Меню и футер не центрованы, поэтому padding слева 55px.

4 
<body>
<div class="head1">
        <div class="top l-p">
                <div class="header">
                    Header
                </div>
        </div>
        <div class="menu">
        	<div class="l-p">
        			Menu
        	</div>
        </div>
        <div class="features l-p">
                <div class="promo promo1">
                    Promo 1
                </div>
                <div class="promo promo2">
                    Promo 2
                </div>
        </div>
</div>
<div class="features l-p">
        <div class="col left">
            Left
        </div>
        <div class="col main">
            Main
        </div>
        <div class="col right">
            Right
        </div>
</div>
    <div class="footer">
        <div class="l-p">
            Footer
        </div>
    </div>
</body>
body { margin: 0; padding: 0; } body { width: 450px; height: 335px; font-family: "Arial", sans-serif; font-size: 10px; color: white; } .l-p { width:350px; margin-left: auto; margin-right: auto } .l-p::after { display: table; content: ""; clear: both; } .head1 { margin-bottom:10px; padding-top:10px; color:white; background:#34495e; padding-bottom:10px } .top { width:350px; background:#c0392b; min-height:35px; } .header { padding-top: 5px; padding-left: 5px; } .menu { background-color:#3498DB; margin-top:10px; min-height:30px; margin-bottom:10px; padding-top: 5px; padding-left: 10px; } .promo { background:#c0392b; width: 165px; min-height: 55px; padding-left: 5px; padding-top: 5px; } .promo1 { float:left; } .promo2 { float:right; } .col { width:65px; min-height:105px; background:#3498DB; padding-top: 5px; padding-left:5px; } .left{ float:left; margin-right: 10px; } .main { float:left; width:185px; margin-right: 10px; } .right { float:left; } .footer { background:#34495e; margin-top:10px; min-height:30px; margin-bottom:10px; padding-top: 5px; padding-left: 10px; }
5

Не все общие свойства объединили. А в целом уже хорошо.