Оцените пожалуйста код! Последнее испытание!

Испытание: строим сетку
Header
Menu
Promo 1
Promo 2
Left
Main
Right
Footer

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

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/

.header {
background-color: #34495e;
height: 170px;
}

.header-header {
background-color: #c0392b;
height: 35px;
width: 350px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
}

.position-header-header {
padding: 5px;
}

.menu {
background-color: #3498db;
height: 35px;
margin-bottom: 10px;
}

.position-menu {
padding: 5px 0px 0px 55px;
}

.promo1 {
float: left;
background-color: #c0392b;
height: 60px;
margin-left: 50px;
width: 170px;
}

.position-promo1 {
padding: 5px;
}

.promo2 {
float: right;
background-color: #c0392b;
height: 60px;
margin-right: 50px;
width: 170px;
}

.position-promo2 {
padding: 5px;
}

.clearfix::before {
content: “”;
display: table;
clear: both;
}

.basis {
height: 130px;
}

.left {
background-color: #3498db;
float: left;
height: 110px;
width: 70px;
margin-left: 50px;
margin-top: 10px;
}

.position-left {
padding: 5px;
}

.main {
background-color: #3498db;
float: left;
height: 110px;
width: 190px;
margin: 10px;
}

.position-main {
padding: 5px;
}

.right {
background-color: #3498db;
float: left;
height: 110px;
width: 70px;
margin-top: 10px;
}

.position-right {
padding: 5px;
}

.footer {
background-color: #34495e;
height: 35px;
}

.position-footer {
padding: 5px 0px 0px 55px;
}

Не получается написать HTML код в теме, он меняется с кода, на готовую страницу. Как это исправить?

insert

Курс, желательно, пройти внимательнее: “сетка” не центрируется, не тянется по вертикали.

Огромное спасибо! Я забыл добавить див, который центровал бы сетку! Ещё раз спасибо!