Проблемы с отступом в испытании 27

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

neponyatki1.jpg1186×805 156 KB
neponyatki2.jpg1181×798 155 KB

Ребята помогите с отступом в блоке c классом header . Я хочу чтобы блок header(красного цвета) имел верхний отступ от родительского блока(цвета асфальта) 10px. Посмотрите на первое изображение. Отступа нет.

А теперь посмотрите на второе изображение. Теперь я пишу в классе header margin-top:10px; . Но почему-то верхний отступ появляется у родительского блока? Хотя я надеялся, что отступ будет у блока c классом header(красного цвета) от родительского блока. Где моя ошибка???

Мой Html код

    <div class="BlockHeader ">
        <div class="centerblock" >
            <div class="header" ><div class="centertext">Header</div></div>
            </div>
        <div class="Menu"><div class="centerblock"> <div class="centertext ">Menu</div></div></div>
        <div class="centerblock clearfix">
        <div class="Promo1"><div class="centertext">Promo 1</div></div>
        
        <div class="Promo2"><div class="centertext">Promo 2</div></div>
        </div>
    </div>
    <div class="Sidebar">
        <div class="centerblock clearfix">
        <div class="left"><div class="centertext">Left</div></div>
        <div class="Main"><div class="centertext">Main</div></div>
        <div class="right"><div class="centertext">Right</div></div>
    </div>
    </div>
    <div class="footer"><div class="centerblock"><div class="centertext">Footer</div></div></div>

Мой css код:

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
    background:lightpink;
}
/*
    Используемые цвета:
    #34495e - мокрый асфальт
    #c0392b - красный
    #3498DB - синий
*/

.BlockHeader{
    
    border:solid green 0px;
    width:100%;
    height:160px;
    background-color:#34495e;
    
}
.header{
    margin-top:10px;
    border:solid 1px red;
   width:340px;
   height:35px;
   background-color:#c0392b;
   margin-bottom:10px;
}
.Menu{
 width:100%;   
 height:35px;
 background-color:#3498D8;
 
}
.Promo1,.Promo2{
   float:left;
    width:165px;
    height:60px;
    background-color:#c0392b;
    margin-top:10px;
    }
    .Promo1{margin-right:10px;}
.centertext{
    padding-left:5px;
    padding-top:5px;
}
.centerblock{
margin:0 auto;
width:350px;}

.clearfix:after{
    content:"";
    display:table;
    clear:both;
}
.Sidebar{
width:100%;
height:130px;
}
.left{float:left;
    background:#3498D8;
    width:70px;
    height:110px;
    margin-right:10px;
    margin-top:10px;
}
.Main{float:left;
    background:#3498D8;
    width:180px;
    height:110px;
    margin-right:10px;
    margin-top:10px;
}
.right{
    float:left;
    background:#3498D8;
    width:70px;
    height:110px;
    margin-right:10px;
    margin-top:10px;
}
.footer{
    width:100%;
    height:40px;
    background-color:#34495e;
    }
2