27/32 Выполнил задание. Оцените, какие косяки? Буду делать еще раз, корректируя ошибки

Курсы §15. Сетки
1 
<div class="header clearfix">
    <div class="content">
        <div class="header-title">
            Header
        </div>
            </div>
        <div class="main-menu">
            <div class="content">
            Menu
            </div>
        </div>
            <div class=content>
                <div class="head-column1">
                    Promo 1
                </div>
                <div class="head-column2">
                    Promo 2
                </div>
            </div>
        </div>
        <div class="main">
            <div class="content">
                <div class="main-column1">
                    Left
                </div>
                <div class="main-column2">
                    Main
                </div>
                <div class="main-column3">
                    Right
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="content">
            Footer
            </div>
        </div>

Вот CSS код:
html,
body {
margin: 0;
padding: 0;
}

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

.header {
    width: 100%;
    background-color: #34495e;
}

.content {
    width: 350px;
    margin: auto;
}

.content .header-title {
    height: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
    background-color: #c0392b;
}

.main-menu {
    height: 25px;
    margin-bottom: 10px;
    padding: 5px;
    background-color: #3498DB;      
}

.content .head-column1 {
    height: 50px;
    width: 160px;
    float: left;
    margin-bottom: 10px;
    padding: 5px;
    background-color: #c0392b;
}

.content .head-column2 {
    height: 50px;
    width: 160px;
    float: right;
    margin-bottom: 10px;
    padding: 5px;
    background-color: #c0392b;   
}

.content .main-column1 {
    width: 60px;
    height: 100px;
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 5px;
    background-color: #3498DB;  
}

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

.content .main-column3 {
    width: 60px;
    height: 100px;
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
    background-color: #3498DB;    
}

.footer {
    height: 30px;
    clear: both;
    background-color: #34495e;
}

.clearfix {
    display: table;
    content: "";
    clear: both;    
}
2

Из косяков:

  1. Фиксированные высоты у блоков (лучше писать min-height)
  2. Не группируете общие свойства у блоков в три колонки. (общими получаются высота, свойство float и отступы)
  3. clear: both; у футера, у вас есть распорка (кстати которая неправильно написана - селектор .clearfix::after надо писать). Распорка добавляется каждому родительскому блоку, внутри которого есть блоки со свойством float.