Мой текстовый div продолжает плавать поверх других, когда я сжимаю браузер до минимальной ширины

Question

Мой текстовый div продолжает плавать поверх других, когда я сжимаю браузер до минимальной ширины

header {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/hero.jpg);
  background-size: cover;
  background-position: center;
  height: 100vh;
}

.hero-text-box {
  position: absolute;
  width: 1140;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<header>
  <nav>
    <div class="row">
      <img src="resources/img/logo-white.png" alt="Omnifood logo" class="logo">
      <ul class="main-nav">
        <li><a href="#">Food delivery</a></li>
        <li><a href="#">How it works</a></li>
        <li><a href="#">Oir Cities</a></li>
        <li><a href="#">Sign up</a></li>
      </ul>
    </div>
  </nav>
  <div class="clearfix"></div>
  <div class="row hero-text-box">
    <h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
    <a class="btn btn-full" href="#">I’m hungry</a>
    <a class="btn btn-ghost" href="#">Show me more</a>

  </div>
</header>

Answer 1

Мне удалось решить эту проблему, убрав абсолютную уместность из класса .hero-text-box, а затем просто поигравшись с полями и отступами.