I'v got some problem with the product landing page

my product landing page it keep saying “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).” and my nav bar should always be on the topview
here is my code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <link href="styles.css" rel="stylesheet" />
    <title> Product Landing Page</title>
 <body>
  <header id="header">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt=" logo"/>
    <nav id="nav-bar">
      <a class="nav-link" href="#Features">Features</a>
      <a class="nav-link" href="#video">How It Works</a>
      <a class="nav-link" href="#Pricing">Pricing</a>
    </nav>
  </header>
   <div class="subscriber">
     <form id="form" action="https://www.freecodecamp.com/email-submit">
    <h2>Handcrafted, home-made masterpieces</h2>
    <input type="email" name="email" id="email" placeholder="type your email"/>
    <input type="submit" id="submit" value="GET STARTED"/>
    </form>
  </div>
   <section id="featured" class="container">
     <div class="featured-wrapper">
       <div class="featured-icon">
         <i class="fas fa-fire"></i>
       </div>
       <div class="featured-text">
         <h3>Premium Materials</h3>
         <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
       </div>
     </div>
     <div class="featured-wrapper">
       <div class="featured-icon">
         <i class="fas fa-business-time"></i>
       </div>
       <div class="featured-text">
         <h3>Fast Shipping</h3>
         <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
       </div>
     </div>
     <div class="featured-wrapper">
       <div class="featured-icon">
         <i class="fas fa-battery-three-quaters"></i>
       </div>
       <div class="featured-text">
         <h3>Quality Assurance</h3>
         <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
       </div>
     </div>
   </section>
   
     <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" title="Roman Carnival Overture Op. 9 for Five Trombones" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  
   <section id="pricing">
     <div class="pricing-box">
       <h4>TENOR TROMBONE</h4>
       <p class="price">$600</p>
       <p>Lorem ipsum.</p>
       <p>Lorem ipsum.</p>
       <p>Lorem ipsum dolor.</p>
       <p>Lorem ipsum.</p>
       <a href="" class="btn">Select</a>
     </div>
     <div class="pricing-box">
       <h4>BASS TROMBONE</h4>
       <p class="price">$900</p>
       <p>Lorem ipsum.</p>
       <p>Lorem ipsum.</p>
       <p>Lorem ipsum dolor.</p>
       <p>Lorem ipsum.</p>
       <a href="" class="btn">Select</a>
     </div>
     <div class="pricing-box">
       <h4>VALVE TROMBONE</h4>
       <p class="price">$1200</p>
       <p>Plays similar to a Trumpet</p>
       <p>Great for Jazz Bands</p>
       <p>Lorem ipsum dolor.</p>
       <p>Lorem ipsum.</p>
       <a href="" class="btn">Select</a>
     </div>
   </section>
   <footer>
     <div class="footer-nav">
       <ul>
         <li><a href="">Privacy
</li>
         <li><a href="">Terms</li>
         <li><a href="">Contact</li> 
       </ul>
     </div>
     <div class="footer-copywrite">
       <p>Copyright 2016, Original Trombones</p>
     </div>
   </footer>
 </body>
</html>   type or paste code here

Hi, I examined your code and I think I see an issue. Carefully look at your anchors. Make sure they perfectly match each corresponding id they are referring to.