Не меняется задний фон

Question

.main-logo {
  background-color: #FF0004;
  width: 1920px;
  height: 100px;
}

.more {
  float: right;
}

.logo {
  float: left;
  width: 100px;
  height: 100px;
}

.head {
  background-color: aqua;
}

ul.menu-head li {
  margin-right: 5px;
  border: 3px solid yellow;
  display: inline-block;
  padding: 25px;
}

.logo-head {
  float: left;
}

.menu {
  float: right;
}

<div class="main">
  <div class="main-logo">
    <div class="logo"><img src="../pict/logo/logo.png"></div>
    <div class="more">
      <a>
        <h1>Узнать больше про наш продукт</h1>
      </a>
    </div>
  </div>
  <div class="head">
    <div class="logo-head"><img src="../pict/logo/logo.png"></div>
    <div class="menu">
      <ul class="menu-head">
        <li><a>Наши продукты</a></li>
        <li><a>Советы по содержанию</a></li>
      </ul>
    </div>
  </div>
  <div class="name-page"></div>
</div>
<div class="products"></div>
<div class="foot"></div>

Пишу диплом по веб-дизайну. И тут встал вопрос. Не меняется задний фон, не понимаю почему

Answer 1

Флоаты схлопывают блок. Это можно решить, но лучше их не использовать, они не удобные, предоставляют скудный функционал. Легче использовать флексы

display: flex - ставим в линию элементы внутри
justify-content: space-between - выравняем во флексовом контейнере крайние элементы по краям по основной флексовой оси (основная ось это та, по которой становятся флексовые элементы)

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.main-logo {
  background-color: #FF0004;
  display: flex;
  justify-content: space-between;
}

.more {
}

.logo {
  width: 100px;
  height: 100px;
}

.head {
  background-color: aqua;
  display: flex;
  justify-content: space-between;
}

ul.menu-head li {
  margin-right: 5px;
  border: 3px solid yellow;
  display: inline-block;
  padding: 25px;
}

<div class="main">
  <div class="main-logo">
    <div class="logo"><img src="../pict/logo/logo.png"></div>
    <div class="more">
      <a>
        <h1>Узнать больше про наш продукт</h1>
      </a>
    </div>
  </div>
  <div class="head">
    <div class="logo-head"><img src="../pict/logo/logo.png"></div>
    <div class="menu">
      <ul class="menu-head">
        <li><a>Наши продукты</a></li>
        <li><a>Советы по содержанию</a></li>
      </ul>
    </div>
  </div>
  <div class="name-page"></div>
</div>
<div class="products"></div>
<div class="foot"></div>

БЛОГ НА HUSL

Не меняется задний фон

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