Не отображаются блоки в задании

Добрый день!
Не могу понять, почему не отображаются блоки Promo1 и Promo2

Код

<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
      <div class="div1">
        <div class="Header">Header
        </div>
        <div class="Menu">Menu
        </div>    
        <div class="Promo 1">Promo 1
        </div>
        <div class="Promo 2">Promo 2
        </div>    
      </div>
        <div class="Left">Left
        </div>    
        <div class="Main">Main
        </div>    
        <div class="Right">Right
        </div>    
        <div class="Footer">Footer
        </div>    
    </body>
</html>

/*
html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
/*
    Используемые цвета:
    #34495e - мокрый асфальт
    #c0392b - красный
    #3498DB - синий
*/
.div1{
    background:#34495e;
    height:170px;
    padding-top:10px;
}
.Header, .Menu, .Promo1, .Promo2, .left, .Main, .Right, .Footer{
    padding:5px;
    margin-top:10px;
}
.Header, .Promo1, .Promo2{
    background:#c0392b;
}
.Menu, .Left, .Main, .Right{
    background:#3498DB;
}
.Promo1{
    float:left;
}
.Promo2{
    float:right;
}
.Promo1, .Promo2{
    width:30px;
    height:200px;
}

.Header{
    height:30px;
    width:340px;
    margin: 0px 50px;
   }
.Menu{
    
    padding-top:5px;
    padding-left:55px;
    height:30px;
}

.Left{
    
}
*/

Потому что в разметке классы с пробелами, а в CSS — без.

Огромное спасибо. Как обычно - невнимательность )