I am trying to make the navigation fixed in the top right corner but not sure how to.
<!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.
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