Не могу float поставить на место

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

ice_screenshot_20180204-214742
Здравствуйте. При верстке возникла проблема. Див с float-ом выпадает из общего предка. Не могли бы вы сказать в чем проблема и как выровнить данную сетку?
Дивы убегают влево
Вот CSS:
html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
background-color: #34495e;
padding-top: 10px;
}
.layout-position{
border: 1px dashed white;
width: 350px;
margin:0 auto;
}
.header{
background-color: #c0392b;
margin-bottom: 10px;
}
.menu{
background-color: #3498DB;
height: 35px;
}

.promo1, .promo2{
background-color: #c0392b;
width: 170px;
min-height: 60px;
float: left;
margin: 10px 5px;
}
p{
margin: 5px 0px 15px 5px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

2

html-код отправьте тоже. Кнопка для вставки </> в редакторе сообщений.

3 
       <!DOCTYPE html>
   <html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div>
        <div class="layout-position header">
            <p>Header</p>
        </div>
    </div>
    <div class="menu">
        <div class="layout-position">
            <p>Menu</p>
        </div>
    </div>
    <div class="clearfix">
        <div class="layout-position wid1">
                <p>Promo 1</p>
        </div>
        <div class="layout-position wid2">
            <p>Promo 2</p>
       </div>
    </div>
    <div><div class="layout-position"><p>Left</p></div></div>
    <div><div class="layout-position"><p>Main</p></div></div>
    <div><div class="layout-position"><p>Right</p></div></div>
    <!--<div><div class="layout-position"><p>Footer</p></div></div>-->
</body>
4

А почему вы пытаетесь отцентрировать каждый promo в отдельности, если по центру должна быть группа из двух?
Класс layout-position в данном случае должен добавляться родителю этих блоков, то есть в данном случае блоку с классом clearfix.