Сетки / Испытание: строим сетку 27/32

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

Здравствуйте.
Прошу не писать правильный ответ, а лишь ответить на вопросы, чтобы я сам решил и приобрел понимание.

  1. Почему у меня promo 1 и promo 2 справа недостаточной ширины? Почему при увеличении все равно не помогает?

  2. Если сделать код в promo 1 и promo 2 код нижеприведенный(скопирую часть перед html кодом), то не будет отступа между ними. Почему? 165+5 + 165+5 = 340. +Первый колонка слева, а вторая справа. Но отрезка почему-то нет между ними. Если сделать ширину 160 то почему-то уменьшается ширина. Не понимаю.

  3. Почему у меня left, main, right имеют background-color мокрого асфальта?

    .collums {
    background:#c0392b;
    float: left;
    width: 165px;
    min-height:55px;
    padding: 5px;
    }

    .collums:last-child{
    float: right;
    }

    Испытание: строим сетку
    Header
          <div class="container-2">
         <div class="wrap menu">Menu</div>
     </div>
     
     <div class="container-3">
         <div class="wrap clearfix">
             <div class="collums">Promo 1</div>
             <div class="collums">Promo 2</div>
         <div>
     </div>
     
     <div class="container-4">
         <div class="wrap clearfix">
             <div class="left">Promo 1</div>
             <div class="main">Promo 2</div>
             <div class="right">Promo 2</div>
         <div>
     </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 {
    background-color: #34495e;
    padding: 10px 0;
    }

    .wrap {
    width: 350px;
    margin: 0 auto;
    }

    .header {
    background-color: #c0392b;
    padding: 5px 0 20px 5px;
    }

    .container-2 {
    background-color: #34495e;
    padding: 0px 0 10px 0;
    }

    .menu {
    width: auto;
    background-color: #3498DB;
    padding: 5px 0 20px 55px;
    }

    .container-3 {
    background-color: #34495e;
    padding: 0px 0 10px 0;
    }

    .collums {
    background:#c0392b;
    float: left;
    margin-right: 10px;
    width: 165px;
    min-height:55px
    }

    .collums:last-child{
    float: right;
    }

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

    .container-4 {
    padding: 10px 0 0 10px;
    }

    .left {
    float: left;
    width: 75px;
    height: 70px;
    background-color: #3498DB;
    margin-right: 10px;
    }

    .main {
    float: left;
    width: 170px;
    height: 70px;
    background-color: #3498DB;
    margin-right: 10px;
    }

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

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

2

Вы не закрыли div с классом wrap, поэтому имеете такое непредсказуемое поведение блоков.
Блоки .left, .main, right по вашему коду никак не могут быть цвета мокрого асфальта. Они голубого цвета.