Product Landing Page - Build a Product Landing Page

Curriculum Help
,
1

*Hi

I cannot work out hw to move my nav-bar to the top of the view-port. Nothing I have tried works.
Any help much appreciated!

Thank you
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>FCC product landing page</title>
    <link rel="stylesheet" href="styles.css" />
    <span class="the-product">Original Trombones</span>
    <header id="header"><h2>Handcrafted home-made masterpieces</h2>

    <img src="https://th.bing.com/th/id/R.b567c968e28ebb91f99e603162b0e295?rik=NOD4kLvuGZmkCw&pid=ImgRaw&r=0" id="header-img"
    width="100">
    <nav id="nav-bar">
      <ul>
        <li> <a href="#materials" class="nav-link">Features</a></li>
        <li> <a href="#How" class="nav-link">How it works</a></li>
        <li> <a href="#Pricing" class="nav-link">Pricing</a></li>
      </ul>
      </nav> 
    </header>
  </head>
  <body>
    <main id="main-doc">

      <section id="email-section">
        <h3>Handcrafted, home-made instruments</h3>
        <form action="https://www.freecodecamp.com/email-submit" id="form"></form>
        <input 
    type="email"
    required placeholder="enter your email address"
    id="email"
    name="email"
    />
    

    <section id="materials">
<h3>Premium Materials</h3>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</section>

   <section id="How">
<h3>Fast Shipping</h3>
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. </section>

<section id="Pricing">
  <h3>Quality Assurance</h3>
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.
</section>

   </body>      

/* file: styles.css */
*{
  margin:2px;
}
.header-img{
  width:100;
object-fit:contain;

}
#nav-bar{
display:flex;
flex-direction:row;
align-items:center;
list-style:none;


}
.nav-links{
  display:flex;
  list-style:none;
  position:fixed;

  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.48

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Add the following properties and their values to the #navbar:

  position: fixed;
  top: 0;
  left: 0;

You have errors in the html code. Check it out:

3

Thank you for your reply. I have fixed it. Iā€™m still not sure where the HTML errors are though.