文字溢出屏幕

Question

我正在尝试制作一个navbar，但是即使我的overflow: hidden上有ul，我的文本也从屏幕上流出了

这是我的摘录

.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>