Нижняя часть бэкграунда не меняется

Question

.deflation {
  background: #f6f6f6;
  padding: 65px 0;
}

.deflation h1 {
  float: left;
}

.deflation .small_arrows {
  float: right;
}

.deflation .items {
  max-width: 1286px;
}

.what-is {
  background-color: #e9e9e9;
  padding: 70px 0;
}

.what-is>div {
  max-width: 1296px;
  margin: auto;
  background-color: #e9e9e9;
}

.what-is .what-is-inner {
  max-width: 828px;
  float: left;
}

.what-is .what-is-inner p {
  color: #6f6f6f;
  font-size: 14px;
  font-weight: 400;
}

.what-is .group {
  /* width: 330px; */
  background: white;
  float: right;
  padding: 14px;
}

.what-is .group a {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
}

.what-is .group p {
  font-size: 13px;
}

.what-is .group img {
  border-radius: 100%;
}

.what-is .group button {
  margin: auto;
  padding: 7px 16px 8px;
  background-color: #507eb3;
  color: white;
  border: 0;
  display: block;
  width: 100%;
  border-radius: 4px;
  margin-top: 8px;
}

<body>
  <section class="deflation">
    <div class="container-fluid header">
      <h1>Снижение цен</h1>
      <div class='small_arrows'>
        <div class="arrow left"></div>
        <div class="arrow right"></div>
      </div>
    </div>

    <div class="items container-fluid">
      <div class="item">
        <img src="images/popular/call of duty.jpg" alt="">
        <div>
          <div>
            <span class="price">3$</span>
            <span class="discount">-9%</span>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="images/popular/call of duty.jpg" alt="">
        <div>
          <div>
            <span class="price">3$</span>
            <span class="discount">-9%</span>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="images/popular/call of duty.jpg" alt="">
        <div>
          <div>
            <span class="price">3$</span>
            <span class="discount">-9%</span>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="images/popular/call of duty.jpg" alt="">
        <div>
          <div>
            <span class="price">3$</span>
            <span class="discount">-9%</span>
          </div>
        </div>
      </div>
    </div>
  </section>


  <section class="what-is">
    <div class="">
      <div class="what-is-inner">
        <h1>Что такое Стимпэй?</h1>
        <p>В нашем интернет-магазине вы сможете гарантированно приобрести ключи к играм от Steam, Uplay, Battle.net и прочих популярных игровых платформ. Наш магазин делает все для того, чтобы ваши покупки проходили быстро, с максимальным удобством и безопасностью,
          а цены оставались максимально доступными. Для покупки достаточно лишь указать электронный адрес при оформлении заказа и выбрать удобный способ оплаты. После этого Вам на почту придет пароль доступа в личный кабинет, в котором Вы получите ключ
          активации.</p>
        <a href="javascript://" class="more">Читать дальше <svg xmlns="http://www.w3.org/2000/svg"
                        width="12" height="12" fill="#ff793a" class="bi bi-caret-down-fill float-right"
                        viewBox="0 0 16 16">
                        <path
                            d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
                    </svg></a>
      </div>


      <div class="group">
        <img src="https://sun2.41039.userapi.com/s/v1/if1/newjAcE_Io-RiPkqydX9daQHanSKrK1Ee9Qgl4JQuKEyvzp3h8apH5lJhh9zmARggTfDfPoH.jpg?size=50x50&quality=96&crop=318,27,530,530&ava=1" alt="">
        <a href="#steampay">steampay</a>
        <br>
        <span>Игры на любой вкус по самым низким ценам ?</span>
        <hr>
        <span>1000 подписчиков</span>
        <br>

        <div>
          <img src="https://sun2.41039.userapi.com/s/v1/if2/yCQguR2imuE3gIHvTOOn4IF4amL3ohToc1qXDaEtzijPvOMqsc9jy7UaryvszlM7AADkgYYMY4drRDwpeNL5TKIL.jpg?size=50x50&quality=96&crop=27,54,360,360&ava=1" alt="">
          <img src="https://sun2.41039.userapi.com/s/v1/if2/yCQguR2imuE3gIHvTOOn4IF4amL3ohToc1qXDaEtzijPvOMqsc9jy7UaryvszlM7AADkgYYMY4drRDwpeNL5TKIL.jpg?size=50x50&quality=96&crop=27,54,360,360&ava=1" alt="">
          <img src="https://sun2.41039.userapi.com/s/v1/if2/yCQguR2imuE3gIHvTOOn4IF4amL3ohToc1qXDaEtzijPvOMqsc9jy7UaryvszlM7AADkgYYMY4drRDwpeNL5TKIL.jpg?size=50x50&quality=96&crop=27,54,360,360&ava=1" alt="">
          <img src="https://sun2.41039.userapi.com/s/v1/if2/yCQguR2imuE3gIHvTOOn4IF4amL3ohToc1qXDaEtzijPvOMqsc9jy7UaryvszlM7AADkgYYMY4drRDwpeNL5TKIL.jpg?size=50x50&quality=96&crop=27,54,360,360&ava=1" alt="">
          <img src="https://sun2.41039.userapi.com/s/v1/if2/yCQguR2imuE3gIHvTOOn4IF4amL3ohToc1qXDaEtzijPvOMqsc9jy7UaryvszlM7AADkgYYMY4drRDwpeNL5TKIL.jpg?size=50x50&quality=96&crop=27,54,360,360&ava=1" alt="">
          <img src="https://sun2.41039.userapi.com/s/v1/if2/yCQguR2imuE3gIHvTOOn4IF4amL3ohToc1qXDaEtzijPvOMqsc9jy7UaryvszlM7AADkgYYMY4drRDwpeNL5TKIL.jpg?size=50x50&quality=96&crop=27,54,360,360&ava=1" alt="">
          <img src="https://sun2.41039.userapi.com/s/v1/if2/yCQguR2imuE3gIHvTOOn4IF4amL3ohToc1qXDaEtzijPvOMqsc9jy7UaryvszlM7AADkgYYMY4drRDwpeNL5TKIL.jpg?size=50x50&quality=96&crop=27,54,360,360&ava=1" alt="">
          <img src="https://sun2.41039.userapi.com/s/v1/if2/yCQguR2imuE3gIHvTOOn4IF4amL3ohToc1qXDaEtzijPvOMqsc9jy7UaryvszlM7AADkgYYMY4drRDwpeNL5TKIL.jpg?size=50x50&quality=96&crop=27,54,360,360&ava=1" alt="">
        </div>
        <button>Подписаться на новости</button>

      </div>
    </div>
  </section>

Когда я написал

.what-is {
    background-color: #e9e9e9;
}

я ожидал, что вся секция окрасится в цвет #e9e9e9. Но не тут то было... Только верхняя часть окрашивается, а нижняя - нет. Как пофиксить?

P.S. На фото вы можете посмотреть на проблему, о которой я говорю.

Answer 1

Нужно в секции указать

overflow: hidden;

БЛОГ НА HUSL

Нижняя часть бэкграунда не меняется

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