Испытание: строим сетку

Привет)) Никак не могу разобраться с этим испытанием. Вот скрин.
Я знаю, что нужно еще подогнать, но это ладно. Главное, я не понимаю, как сделать отступ, что бы меню отделилось от самого верха.

То что код кривой, это факт, но все же надеюсь на помощь и советы. Спасибо большое.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section class="header-background">
    <div class="red">
    <header class="head">
    Header
   </header>
    <div>
    <div class="menu">  
    Menu
    </div>
    </section>
    <main>
    <section class="promo">
    <div class="promo-back">
    <div class="promo1">Promo 1</div>
    <div class="promo2">Promo 2</div>
    </div>
    </section>
    <section class="layout-column">
    <div class="column3">Left</div>
    <div class="column2">Main</div>
    <div class="column1">Right</div>
    </section>
    </main>
    <footer class="footer">
    Footer
    </footer>
   </body>
</html>



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

body {
  width: 450px;
  height: 335px;

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}

.header-background {
  background-color:#34495e;
  margin:0;
  }

.head {
background-color: #c0392b;
margin: 0px;
margin-left:50px;
width: 340px;
min-height:40px;
}

  
.menu {
  background-color:#3498db;
  margin-top:10px;
  margin-bottom:0px;
  width:auto;
  min-height:40px;
  }

.promo-back {
  background-color:#34495e;
  min-height:80px;
  margin:0;
  }

.promo1 {
  background-color:#c0392b;
  float:left;
  width:180px;
  margin-left:40px;
  margin-top:15px;
  min-height:50px;
  }

.promo2 {
  background-color:#c0392b;
  float:right;
  width:180px;
  margin-right:40px;
  margin-top:15px;
  min-height:50px;
  }

.layout-column{
  
  }

.footer {
 background-color:#34495e;
 min-height:40px;
 width:auto;
 clear:both;
 }




.column3 {
  background-color:#3498db;  
  float:right;
  width:100px;
  min-height:150px;
  margin-top:10px;
  margin-bottom:10px;
  margin-right:30px;
}

.column2 {
  background-color:#3498db; 
  float:right;
  width:150px;
  min-height:150px;
  margin-left:15px;
  margin-right:15px;
  margin-top:10px;
  margin-bottom:10px;
  }

.column1 {
  background-color:#3498db; 
  float:right;
  width:100px;
  min-height:150px;
  margin-top:10px;
  margin-bottom:10px;
  margin-left:20px;
  }
/*
  Используемые цвета:
  #34495e – мокрый асфальт
   #c0392b– красный
  #3498db – синий
*/

Задать .header-background отступ padding-top.

1 лайк

Спасибо за помощь!! и как я не догдалась))))))

1 лайк

Всегда рада :wink:

1 лайк