Почему внутренний div не сдвигает внешний div вниз?

html {
  box-sizing: border-box;
}

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

body {
  margin: 0px;
}

ul {
  display: block;
}

li {
  list-style: none;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  background-color: gainsboro;
}


/*content*/

.content__slider {
  padding: 0px 15px;
}

.content__list {
  font-size: 25px;
  width: 42%;
}

.content__inner {
  display: flex;
}

.content__slider {
  width: 58%;
}


/* Слайдер */

.content__slider {
  position: relative;
}

#slides article {
  width: 30.2%;
  float: left;
}

.content__slider input[type=radio] {
  display: none;
}

#slides .image {
  /*устанавливает общий размер блока с изображениями*/
  width: 330%;
  line-height: 0;
}

#overflow {
  /*сркывает все, что находится за пределами этого блока*/
  width: 100%;
  overflow: hidden;
}

article img {
  /*размер изображений слайдера*/
  width: 100%;
}

#slider {
  position: relative;
}


/*настройка переключения и положения для левой стрелки*/

#switch2:checked~#controls label:nth-child(1),
#switch1:checked~#controls label:nth-child(3),
#switch3:checked~#controls label:nth-child(2) {
  background-color: blue;
  position: absolute;
  display: block;
  height: 60px;
  width: 60px;
}


/*настройка переключения и положения для правой стрелки*/

#switch1:checked~#controls label:nth-child(2),
#switch2:checked~#controls label:nth-child(3),
#switch3:checked~#controls label:nth-child(1) {
  background-color: blue;
  float: right;
  position: absolute;
  top: calc(100% + 50px);
  display: block;
  height: 60px;
  width: 60px;
}

label,
a {
  /*при наведении на стрелки или переключатели - курсор изменится*/
  cursor: pointer;
}


/*позиция изображения при активации переключателя*/

#switch1:checked~#slides .image {
  margin-left: 0;
}

#switch2:checked~#slides .image {
  margin-left: -100%;
}

#switch3:checked~#slides .image {
  margin-left: -200%;
}

#controls {
  /*положение блока всех управляющих элементов*/
  margin: -25% 0 0 0;
  width: 100%;
  height: 50px;
}

#slides .image {
  /*анимация пролистывания изображений*/
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#controls label:hover {
  /*прозрачность стрелок при наведении*/
  opacity: 0.6;
}

#controls label {
  /*прозрачность стрелок при отводе курсора*/
  transition: opacity 0.2s ease-out;
}


/*Элементы слайдера*/

.box {
  background-color: black;
  color: white;
  display: flex;
  justify-content: space-between;
}

.box div {
  padding: 10px 10px 10px 10px;
}

.box li {
  display: inline-block;
}

.box a {
  border-left: 1px solid #302c2b;
  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 24px;
  padding-top: 10px;
}

.fa-angle-left i::before {
  content: "\f104";
  font: FontAwesome;
  font-size: 26px;
}

.fa-angle-rigth i::before {
  content: "\f104";
  font: FontAwesome;
  font-size: 26px;
}

a {
  text-decoration: none;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<section class="content">
  <div class="container">
    <h1>Список</h1>
    <div class="content__inner">
      <div class="content__list">
        <ul>
          <li>Quisquam dolorem ipsum quia</li>
          <li>Quisquam dolorem ipsum quia</li>
          <li>Quisquam dolorem ipsum quia</li>
          <li>Quisquam dolorem ipsum quia</li>
          <li>Quisquam dolorem ipsum quia</li>
        </ul>
      </div>

      <div class="content__slider">
        <input checked type="radio" name="respond" id="desktop">
        <article id="slider">
          <input checked type="radio" name="slider" id="switch1">
          <input type="radio" name="slider" id="switch2">
          <input type="radio" name="slider" id="switch3">
          <div id="slides">
            <div id="overflow">
              <div class="image">
                <article>
                  <img src="https://memax.club/wp-content/uploads/2019/05/55-176.jpg">
                  <h3 class="feature-title">Neque porro quisquam est dolorem ipsum</h3>
                  <small class="feature-desc">Velit esse cillum dolore pariatur</small>
                </article>
                <article>
                  <img src="https://memax.club/wp-content/uploads/2019/05/55-176.jpg">
                  <h3 class="feature-title">Neque porro quisquam est dolorem ipsum</h3>
                  <small class="feature-desc">Velit esse cillum dolore pariatur</small>
                </article>
                <article>
                  <img src="https://memax.club/wp-content/uploads/2019/05/55-176.jpg">
                  <h3 class="feature-title">Neque porro quisquam est dolorem ipsum</h3>
                  <small class="feature-desc">Velit esse cillum dolore pariatur</small>
                </article>
              </div>
            </div>
          </div>
          <div id="controls">
            <label for="switch1"></label>
            <label for="switch2"></label>
            <label for="switch3"></label>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>