Как убрать белый зазор между контейнером и краем области просмотра?

Question

Я застрял с одной проблемой, и самая большая проблема в том, что я даже не представляю, что это такое и как решить эту проблему. Вот изображение из окна моего браузера

Как вы можете видеть, при уменьшении размера окна возникает белый пробел. Черный блок в верхней части страницы имеет фиксированную позицию и ширину 100%. Мои точки останова `[1200, 900, 600]

Вот ссылка на сайт на страницах Github ` Образовательный сайт

Был бы рад получить помощь.

Answer 1

Ваш почтовый ввод в нижнем колонтитуле слишком велик для небольших устройств и переполняет страницу.

Это можно исправить, установив ширину входа на 100% и установив разрыв строки между входом и кнопкой. Или вы можете добавить flex-direction: column; к .main-footer__form для ширины экрана меньше 700px.

Но, вероятно, лучшим способом было бы удалить position: absolute; из .main-footer__form и установить rowspan ячейки на 3. Вы должны объединить это с flex-direction: column; для экранов меньшего размера 600px.

.main-footer__form {
  display: flex;
}

@media screen and (max-width: 600px) {
  .main-footer__form {
    flex-direction: column;
  }
}

<table class="main-footer__table">
  <!-- ... -->
  <td rowspan="3" style="vertical-align: top;">
    <form action="#" class="main-footer__form">
      <input type="email" name="mail">
      <input type="submit" name="submit" value="→">
    </form>
  </td>
  <!-- ... -->
</table>