How do i get the nav to stay fixed in the top right?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header id='header'>
<img id='header-img' src=''></img>
</head>
<div id='page-wrapper'>
</div>
<nav id='nav-bar'>
<ul>
<li>
<a class='nav-link' href='#Bio'>Bio</a>
</li>
<li>
<a class='nav-link' href='#What to know'>What to know</a>
</li>
<li>
<a class='nav-link' href='#Pricing'>Pricing</a>
</li>
</ul>
</nav>
</header>
<section id='hero'>
<h2>The best football coaching service</h2>
<form id='form' action='https://www.freecodecamp.com/email-submit'>
<input name='email' id='email' type='email' placeholder='Enter your email address' required>
<input id='submit' type='submit' value='Get started' class='btn'>
</form>
</section>
<div class='container'>
<section id='features'>
<div class='grid'>
<div class='icon'>
<i class="fa fa-book">
</i>
</div>
<div class='desc'>
<h2>Learn from experienced coaches</h2>
<p>Our coaches have years of experience working with kids of all ages and providing insightful training</p>
</div>
</div>
<div class='grid'>
<div class='icon'>
<i class="fa fa-soccer-ball-o"></i>
</div>
<div>
</div>
<div class='desc'>
<h2>Brush up on your football technique</h2>
<p>It is essential that kids learn the basics and that is what we focus on as they have all the fundamentals in place</p>
</div>
</div>
<div class='grid'>
<div class='icon'>
<i class="fa fa-volume-control-phone"></i>
</div>
<div class='desc'>
<h2>Quality support and service</h2>
<p>We will provide our exper service after sessions through regular reports and updates through our progress chart</p>
</div>
</div>
</section>
<section id='training example'>
<iframe id='video' height='315' src='https://www.youtube.com/watch?v=H5SMtN6Qa6w&pp=ygURZm9vdGJhbGwgdHJhaW5pbmc%3D' frameborder='0' allowfullscreen>
</iframe>
</section>
<section id='pricing'>
<div class='product' id='1 session'></div>
<h2>1 session</h2>
<ol>
</ol>
<li>£30 per hour</li>
<li>basic training</li>
<li>ballwork</li>
<button class='btn'>Select</button>
<div class='product' id='4 sessions'></div>
<h2>4 sessions</h2>
<ol>
</ol>
<li>£25 per hour</li>
<li>basic training</li>
<li>ballwork</li>
<li>Notes sent at the end of session</li>
<li>Phone call discussions</li>
<button class='btn'>Select</button>
<div class='product' id='10 sessions'></div>
<h2>10 sessions</h2>
<ol>
</ol>
<li>£25 per hour</li>
<li>basic training</li>
<li>ballwork</li>
<li>Notes sent at the end of session</li>
<li>Phone call discussions</li>
<li>Fitness work
</li>
<li>
Nutrition Guide
</li>
<button class='btn'>Select</button>
</section>
<footer>
<ul>
<li><a href="#footer">Privacy</a></li>
<li><a href="#footer">Terms</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
<span>Copyright Football Coaching</span>
</footer>
</div>
</div>
</body>
</html>```
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
```text
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page
This is the error 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).
To solve this, I created some three divs and gave them an id attribute. The value of the id attribute is the value of the href attributes here.
I am still missing one step:
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 ).
