Испытание: строим сетку. Фидбэк, пожалуйста.

    <header class="header">
        <div class="wrapper">
            <div class="header__logo">Header</div>
        </div>
    </header>
    
    <div class="menu">
        <div class="wrapper">
            <div class="menu__top">Menu</div>
        </div>
    </div>
    
    <div class="promo">
        <div class="wrapper">
            <ul class="promo-blocks clearfix">
                <li class="promo-block__item-1">Promo 1</li>
                <li class="promo-block__item-2">Promo 2</li>
            </ul>    
        </div>
    </div>
    
    <main class="content clearfix">
        <div class="wrapper">
            <div class="content__left">Left</div>
            <div class="content__main">Main</div>
            <div class="content__right">Right</div>
        </div>
    </main>
    
    <div class="footer">
        <div class="wrapper">
            <div class="footer-logo">Footer</div>
        </div>
    </div>

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

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

.wrapper {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.header,
.promo,
.footer {
    background-color: #34495e;
}

.header,
.promo,
.content {
    padding: 10px 0;
}

.menu {
    background-color: #3498DB;
}

.header__logo {
    background-color: #c0392b;
    min-height: 25px;
    padding: 5px;
}

.menu__top {
    min-height: 25px;
    padding: 5px;
}

.promo-blocks {
    padding: 0;
    margin: 0;
    list-style: none;
}

.promo-block__item-1,
.promo-block__item-2 {
    float: left;
    min-height: 50px;
    width: 160px;
    padding: 5px;
    margin-right: 10px;
    background-color: #c0392b;
}

.promo-block__item-2 {
    margin-right: 0;
}

.content__left, 
.content__main,
.content__right {
    float: left;
    min-height: 100px;
    padding: 5px;
    background-color: #3498DB;
}

.content__left {
    width: 60px;
    margin-right: 10px;
}

.content__main {
    width: 180px;
    margin-right: 10px;
}

.content__right {
   width: 60px;     
}

.footer-logo {
    min-height: 25px;
    padding: 5px;
}

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

Сейчас задание обсуждается в этой теме. Возможно, вы захотите что-то изменить в своем коде, если почитаете.