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