Product Landing Page .navlink Help

I tried creating a link to fulfill the nav-link requirement–" User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page." What I’m confused about is that I put href="#contact" inside an anchor element, and then when I put id=“contact” later inside an h1 element, the anchor element didn’t link to h1 element. Why won’t this work? I am open to suggestions and feedback. My pen is online at https://codepen.io/RexRode/pen/GRJZpwP.

<!DOCTYPE html>
<main>
  <header id="header">
    Blue Pure Spring Water <br>
    <img id="header-img" src="https://pixabay.com/get/53e7dd4b4355b108feda84608229327c153ddced534c704c7d2e7cdc9149c65c/drops-of-water-578897_1920.jpg" width=30%>
    <nav id="nav-bar">
  <a href="#contact" class="nav-link">Contact</a> |
  <a href="#Policy" class="nav-link">Policy</a> |
      <a href="#Sources" class="nav-link">Sources</a>
 
</nav>
  </header>
  <h1 id="contact"> 
    7777 First Street City, State 77777</h1>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</main>

All the href values need to match up with some element on the page with the correct id. You only have it for the first link, you need it for the Policy and Sources links as well.