Problems With Building landpage

**
Hello ,

Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer ) —
— i was being told that my code always have this Problem .i dunt know how to solve it , Hope someone can help me, thank you.

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>

<html>
<link
 rel="stylesheet"
 href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
 integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
 crossorigin="anonymous"
 />


 <style>

 main{
   display:flex;
   flex-direction: column;
   
 }

   header {
 position: fixed;
 width: 100%;
 background-color: hsl(45, 50%, 90%);
 display: flex;
 grid-template-columns: 300px 1fr;
 z-index: 1;
 top: 0;
 left: 0;
 padding-top: 5px;
 }

 body {background-color: hsl(21, 45%, 60%);
 font-family: "Raleway", Helvetica, sans-serif;}

 #nav-bar {
 grid-column: 3;
 align-self: center;
 justify-self: right;
 display: flex;
 margin-right: 5px;
}
 #video {
 margin: auto;
 max-width: 100%;
 margin-top: 20px;
 margin-bottom: 10px;
}
@keyframes background-color {
   100% {
     background-color: hsl(45, 70%, 65%);
   }
}
@media(max-width: 640px) {
 main {
   font-size: 85%;
 }
 }
</style>

<main>
 div id="page-wrapper">
 <header id="header">
   <div class="logo">
     <img
       id="header-img"
       src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
       alt="original trombones logo" />
   </div>

<nav id="nav-bar">
     <ul>
       <li><a class="nav-link" href="#features">Features</a></li>
       <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
       <li><a class="nav-link" href="#pricing">Pricing</a></li>
     </ul>
   </nav>
   </header>
 <div>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
  <input type="email" id="email" name="email" placeholder="enter your email" required</input>
  <input type="submit" id="submit" name="submit"</input>
  </form>
 <iframe id="video" iframe width="280" height="240" src=https://www.youtube.com/embed/y8Yv4pnO7qc frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"  ></iframe>
 </div>
 </main>
<footer>
     <ul>
 <li><a href="#">Privacy</a></li>
 <li><a href="#">Terms</a></li>
   <li><a href="#">Contact</a></li>
     </ul>
     <span>Copyright 2016, Original Trombones</span>
   </footer>
   



/* file: styles.css */

   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15

Challenge: Build a Product Landing Page

Link to the challenge:

you’ll have to assign “href” to all ready existing html elements “ID”, so either you can give those id’s to some of your elements or choose from already existing "id"s from page

Thank u so much , problem solved .