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

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

помогите с испытанием!
начал делать испытание, получалось плохо, удалил код и начал заново
но! появился какой то отступ сверху, прям сразу, как начинаю писать код:

скриншот

Screen Shot 2020-04-27 at 18.11.23
Screen Shot 2020-04-27 at 18.11.231129×626 95.5 KB

убирается паддингом, но хэдер едет вниз, а также тескт в блоках promo1 promo 2 left center - раньше при таком же коде этого не было

скриншот

Screen Shot 2020-04-27 at 19.36.00
Screen Shot 2020-04-27 at 19.36.001087×645 103 KB

  1. делаю блоки промо через inline-block, чтобы код был меньше, как выровнять promo 2? оба шириной 170 пикс + марджин 5 между ними, марджин после второго блока обнулен - 345 при ширине выравнивателя в 350, но при марджине более 5 второй блок падает вниз (border-box есть)
html 
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header class="main-header">
      <div class="layout">
        <div class="header"> <p>Header</p> 
        </div>
        </div>
        <div class="header-menu">
         <div class="layout"> <p>Menu</p> </div>
          </div>
          <div class="layout">
           <div class="promo">
            <p>Promo 1</p>
            </div>
           <div class="promo">
            <p>Promo 2</p>
            </div>
       </div>
      </header>
      <main>
        <div class="layout">
          <div class="main-left">
            <p>Left</p> </div>
          <div class="main-center">
            <p>Center</p> </div>
          <div class="main-right">
            <p>Right</p> </div>
        </div>
        </main>
        <footer>
          <div class="layout">
           <p>Footer</p>
          </div> 
        </footer>
  </body>
</html>
CSS 
html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 450px;
  height: 335px;
  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}
* {box-sizing: border-box;}
p {padding: 5px;}

.layout {
  width: 350px;
  margin: 0 auto;
}
.main-header {
  background: #34495e; 
  padding-top: 5px;
  
}
.header {
  background: #c0392b;
  min-height: 35px;
}
.header-menu {
  background: #3498db;
  min-height: 35px;
}
.promo {
  display: inline-block;
  background: #c0392b;
  width: 170px;
  min-height: 55px;
  margin: 10px 5px 10px 0;
}
.promo:last-of-type {margin: 0;}
.main-left,
.main-right {
  background: #3498db;
  min-height: 110px;
  width: 70px;
  margin: 10px 10px 5px 0;
  float: left;
}
.main-right {margin-right: 0}
.main-center {
  background: #3498db;
  min-height: 110px;
  width: 190px;
  margin: 10px 10px 10px 0;
  float: left;
}
footer {
  clear:both;
  background: #34495e;
  min-height: 35px;
}

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

Ps покурил старые темы, ответа не нашел, хочу разобраться, а не копировать чужой код
pss хотел задать свой вопрос в комментах, но форум рекоменлдовал не поднимать старые темы 2017-2016 годов

Спасибо!

2

p {margin: 0; padding: 5px;}
Обнулил марджин для текста и все легло нормально, хоть и не понял откуда там был марджин изначально :confused:
Но колонки promo через inline-block так и не получается сделать, подскажите! 170px+170px (2 блока)+5px(марждин между ними) = 345px при ширине контейнера в 350, но при маржине более 6 второй блок выпадает
[разобрался: урать пробелы в html или обнулить шрифт: об этом в следующих главах курса]
код в codepen.io

Screen Shot 2020-04-28 at 16.29.30
Screen Shot 2020-04-28 at 16.29.30975×353 52.4 KB

если кто ищет решение, вот хороший разбор этого задания

3

решил на сотку, но по своему

  <body>
    <Header><div class="block1">Header</div></Header>
    <Menu><div class="block2">Menu</div></Menu>
    <div class="promo">
      <div class="promo Promo1">Promo 1</div>    
      <div class="promo Promo2">Promo 2</div>
      </div>
<div class="tri">    
  <div class="column1">Left</div>
  <div class="column2">Main</div>
  <div class="column3">Right</div> 
</div>

    <Footer><div class="block2">Footer</div></Footer>
  </body>

CSS

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

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

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
Header{
background:#34495e;
width: 450px;
height: 55px;
}

.block1{
background:#c0392b;
padding-left:5px;
padding-top:5px;
margin-left:50px;
margin-right:50px;height:30px;position: relative;
bottom:-10px;

}
Menu{background:#3498db;height:35px;margin:0;}

.block2{
position: relative;
bottom:-5px;
margin-left:15px;

}
.promo{background:#34495e;height:80px;}

.Promo1{
float: left;
margin-left:50px;
position: relative;
bottom:-10px;
width: 165px;
height: 55px;
background:#c0392b;
padding-left:5px;
padding-top:5px;}

.Promo2{
position: relative;
bottom:-10px;
float: right;
margin-right:50px;
width: 165px;
height: 55px;
padding-left:5px;
padding-top:5px;
background:#c0392b;}

.tri{height:120px;

}
.column1{
background:#3498db;
float:left;
width:65px;
height:105px;
margin-left:50px;
padding-top:5px;
padding-left:5px;
position: relative;
bottom:-10px;
}

.column2{
background:#3498db;
float:left;
width:185px;
height:105px;
margin-left:10px;
padding-top:5px;
padding-left:5px;
position: relative;
bottom:-10px;
}

.column3{
background:#3498db;
float:right;
width:65px;
height:105px;
margin-right:50px;
padding-top:5px;
padding-left:5px;
position: relative;
bottom:-10px;

}

Footer{margin-top:10px;
background:#34495e;
height:35px;
padding-top:0px;
padding-left:40px;

}