Div занимает больше место чем указано

Question

Учусь делать верстку, есть шапка, под шапкой блок из меню и основного контента, дабы занимали общее пространство по горизонтали. под ними должна быть секция footer, но блок div "вылезает" за рамки, что я обозначил для leftside и main пространств. код прикрепляю ниже. html

body {
  margin: 0px;
  width: 100vw;
  height: 100vh;
}

.hea {
  display: flex;
  height: 80vh;
  width: 100%;
  margin-bottom: 0px;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #999;
  height: 10%;
}

.left {
  background: #777;
  width: 15%;
  height: 80%;
}

.main {
  display: flex;
  background: #444;
  text-align: center;
  width: 85%;
  height: 80%;
}

.avatar {
  margin: 6px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}


.logo {
  margin: 6px;
  width: 20px;
  height: 20px;
  cursor: pointer;

}

.foot {
  display: flex;
  height: 10%;
  width: 100%;

}

<header class="head">
  <img class="logo" src="2202-12_12-50-45.jpg">
  <img class="avatar" src="IMG_8281.JPG" >
</header>
<div class="hea">
  <aside class="left">
    <a href="">Главная</a>
    <p></p>
    <a href="">Карта цветов</a>
    <p></p>
    <a href="">Готовые изделия</a>
    <p></p>
    <a href="">Контакты</a>
  </aside>
  <main class="main">контент</main>
</div>
<footer class="foot">низ</footer>

Как выглядит сама проблема (не умею правильно прикреплять код не бейте)

Answer 1

только что пофиксил сам же, надо было убрать отступ в секции left и main, тк .hea занимает 80% от body, а left и main 80% от .hea

пусть мое озарение поможет таким же слепым в будущем)

БЛОГ НА HUSL

Div занимает больше место чем указано

Ответы (1 шт):