Испытание 27 Нужна помощь

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

Доброго дня!
Прошу помощи, что-то совсем запуталась в этот раз с кодом. В трех колонках он выдает нечто совсем невнятное, одна за другой спускаются колонки лесенкой, хотя так не должно быть, а футер налипает на них. Где-то ошибки, но где именно - не могу понять.
Тема, видимо, остается для меня неясной в некоторых моментах, к сожалению.
Очень надеюсь, что смогут мне разъяснить, что не так и как сделать лучше!

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="top">
      
    <div class="layout-positioner">
    <div class="header">
      <p>Header</p></div>
    <div>
      
    <div class="layout-positioner">
    <div class="menu">
      <p>Menu</p></div>
    </div>
    
    <div class="layout-columns1 clearfix">
    <div class="promo promo1"><p>Promo 1</p></div>
    <div class="promo promo2"><p>Promo 2</p></div>
    </div>

    <div class="layout-columns2 clearfix">
   <div class="position left">Left</left>
    <div class="position main">Main</main>
    <div class="position right">Right</div>
    </div>
    <div class="footer">Footer</div>
    
       </div> 
  </body>
</html>

CSS

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

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

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

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

.top {
background-color:#34495e;
padding: 1px 0;
 margin-bottom: 10px;
  }

.header {
  color: white;
  background-color:#c0392b;
  width: 345px;
  height: 35px;
  margin: 10px auto;
  }
  
.header p {
  padding:5px;}
  
.menu p {
  padding-left: 55px;
  padding-top: 5px;}

.menu {
color: white;
width: 100%;
background-color: #3498db; 
height: 35px;
margin-bottom: 10px;
  }
  
.layout-columns1 {
margin-bottom: 10px;
  }
      
  .promo {
  background-color: #c0392b;
  width: 170px;
  height: 60px;
  }
  
  .promo p{
  padding:1px 5px;
  }

  
  .promo1 {
 float: left;
 margin-left: 50px;
  }
  
  .promo2 {
 float: right;
 margin-right: 50px;
  }
  
.layout-columns2 {
  background-color: white;
    }
  
  
.position {
  background-color: #3498db;
  margin-top: 10px;
  margin-bottom: 10px;
  float: left;
  padding: 5px;
  }
  
.left {
  width: 60px;
  height: 100px;
  margin-left: 50px;
  }

.main {
  width: 180px;
  height: 100px;
  margin-left: 75px;
 
  }
  
.right {
  width: 60px;
  height: 100px;
  margin-left: 195px;
  }
  
.footer {
  background-color: #34495e;
  }
2

Обрати внимание на закрывающие теги.

3

Спасибо большое за наводку! Теперь нашла ошибки, хотя до этого уже проверяла, но пропустила.