Tell us what’s happening:
Describe your issue in detail here.
**Your code so far**
/* file: index.html */
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="styles.css" rel="stylesheet">
<title>Product Landing Page</title>
</head>
<body>
<header id="header">
<img id="header-img" src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" alt="freecodecamp logo">
<header>
<h1>Product Landing Page</h1>
<nav id="nav-bar">
<p><a class="nav-link" href="#Premium_Materials">Premium Materials</a></p>
<p><a class="nav-link" href="#Fast_Shipping">Fast Shipping</a></p>
<p><a class="nav-link" href="#Quality_Assurance">Quality Assurance</a></p>
</nav>
</header>
<video id="video" src="movie.ogg" width="300" height="200" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<section class="main-section" id="Premium_Materials">
<header><h2>Premium Materials</h2></header>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
<section class="main-section" id="Fast_Shipping">
<header><h2>Fast Shipping</h2></header>
<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>
<section class="main-section" id="Quality_Assurance">
<header><h2>Quality Assurance</h2></header>
<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>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" name="email" placeholder="Enter your email">
<input id="submit" type="submit" value="Submit" />
</form>
</body>
</html>
/* file: styles.css */
#nav-bar {
position:fixed;
display: flex;
top: 0%;
width: 100%;
max-width: 500px;
justify-content: inline;
font-size: 15px;
float: left;
padding-top: 25px;
margin-top: 10px;
height: 20px;
font-family: sans-serif;
gap: 0.5rem;
background-color: orange;
}
#header-img{
display: auto;
width: 150px;
top: 50%;
right: 0%;
padding-top: 150px;
}
@media only screen and (max-width: 500px) {
#nav-bar {
max-width: 300px;
}
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: