Текст выходит за пределы экрана

.header {
  background-image: url('img/bg.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  color: white;
  width: 100vw;
  height: 100vh;
}

.heading {
  display: inline-block;
  font-size: 3em;
}

.nav-items {
  overflow: hidden;
}

<div class = "header">
  <div class = "nav">
    <!-- <img src = "img/logo.png" alt = "logo" class = "logo"> -->
    <ul class = "nav-items">
      <li class = "nav-item"><a href = "https://jordanbaron.github.io">Home</a></li>
      <li class = "nav-item"><a href = "#about">About</a></li>
      <li class = "nav-item"><a href = "#portfolio">Portfolio</a></li>
      <li class = "nav-item"><a href = "#contact">Contact</a></li>
    </ul>
  </div>
  <h1 class = "heading" id = "heading"></h1>
</div>