100% прошу посмотреть код и скажите недостатки

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

HTML

<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="container">
        <header>
            <div class="header">
                <div class="layout">
                    <div class="header_color">
                        <span>Header</span>
                    </div>
                </div>
            </div>
            <div class="menu">
                <div class="layout">
                    <span>Menu</span>
                </div>
            </div>
            <div class="promo">
                <div class="layout">
                    <div class="promo1">
                        <span>Promo 1</span>
                    </div>
                    <div class="promo2">
                        <span>Promo 2</span>
                    </div>
                </div>
            </div>
        </header>
        <main>
            <div class="layout">
                <div class="left">
                    <span>Left</span>
                </div>
                <div class="main">
                    <span>Main</span>
                </div>
                <div class="right">
                    <span>Right</span>
                </div>
            </div>
        </main>
        <footer>
            <div class="layout">
                <div class="footer">
                    <span>Footer</span>
                </div>
            </div>
        </footer>
    </div>
</body>

CSS

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

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

.container{
max-width:450px;
min-height:335px;
}

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

span{
padding:5px;
display:inline-block;
}

header{
max-width:450px;
min-height:170px;
background:green;
}

.header{
max-width:450px;
min-height:35px;
background:#34495e;
padding:10px 0px;
}

.header_color{
max-width:350px;
min-height:35px;
background:#c0392b;
}

.menu{
max-width:450px;
min-height:35px;
background:#3498DB;
}

.promo{
max-width:450px;
min-height:80px;
background:#34495e;
}

.promo1{
width:170px;
min-height:60px;
float:left;
background:#c0392b;
margin:10px 10px 10px 0px;
}

.promo2{
width:170px;
min-height:60px;
float:left;
background:#c0392b;
margin:10px 0px 10px 0px;
}

main{
max-width:450px;
min-height:130px;
}
.left{
width:70px;
float:left;
min-height:110px;
background:#3498DB;
margin:10px 10px 10px 0px;
}
.main{
width:190px;
min-height:110px;
float:left;
background:#3498DB;
margin:10px 0px 10px 0px;
}
.right{
width:70px;
float:left;
min-height:110px;
background:#3498DB;
margin:10px 0px 10px 10px;
}
footer{
max-width:450px;
min-height:40px;
background:#34495e;
}

2

Правила для .main и .header повторяются. Перепроверьте.

3

так main тэг и main класс, тоже самое с header

4

Да, вижу. Заметила точку в начале. Уделяйте больше внимания названиям классов. Желательно, чтобы названия так не совпадали, если они соответствуют разным элементам.
Зеленый фон здесь лишний.

Группируйте одинаковые свойства у элементов, чтобы сделать код короче.
Других замечаний нет.

5

Спасибо, да забыл убрать фон когда делал сетку