Product landing page iissue

Tell us what’s happening:
I’m working on the responsive website project; the project landing page project and I’ve tried to write the code but get this error; when i click a .nav-link button in the new element, i am taken to corresponding section of the landing page.

  **Your code so far**
  
     <header id="header">
       <div class="logo">
         <img
              id="header-img"
              alt="altissimo logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFuV_-O0LbcIMnr0v3SZm2AZxwW1rEr_kdr_M4aoC32_WrKJWXlH4k37bX4jCWpeNBd44&usqp=CAU"
              />
       </div>
       
       <nav id="nav-bar">
         <ul>
 <li><a class="nav-link" href="#sneakers">Sneakers</a></li>
           
 <li><a class="nav-link" href="#the-new-spx-series">The New SPX Series</a></li>
           
<li><a class="nav-link" href="#altissimo-x-bavari-be-sporty-campaign">AltissimoxBavari BE SPORTY Campaign</a></li>
           
 <li><a class="nav-link" href="#contact-us">Contact Us</a></li>
         </ul>
       </nav>
  </header>
  
  
       <div class="form">
             <h2>The New Machina Sneaker launch date</h2>
            <form id="form" action="https://www.freecodeecamp.com/email-submit">
               <input
                  type="email"
                  placeholder="enter your email address"
                  name="email"
                  id="email"
                  required
                />
           <input id="submit" type="submit" value="Get Started"/>
           </form>
       </div>
  
          
  <div id="sneakers">
    <div class="card">
      <div class="icon"><i class="fa fa-3x fa-fire"></i></div>
      <div class="content">
        <h2>The Altissimo New Machina Mansory</h2>
        <p>
          Formed under concise effort to give maximum run time to our sneaker freaks. made from 100% polyster and recycled materials, the Machina Mansory comes in five amazing color-way. To launch on our website December 1st.
        </p>
      </div>
    
  </div>      
 
    <div class="card">
      <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
      <div class="content">
        <h2>Fast shipping</h2>
        <p>
          We assure you fast shipping of all purchases and free shipping on purchase above $200. We also provide refund after purchase within 7 days.
        </p>
      </div>

    <div class="card">
   <div class="icon"><i class="fa fa-3x fa-battery-full"></i></div>
      <div class="content">
        <h2>Quality Assurance</h2>
        <p>
    Products are highly maintained for customer satisfaction. produced for maximum comfort, we assure you of quality and durable trainers.
        </p>
      </div>
      </div>
    </div>
    
    <div id="the-altissimo-x-bavari-collaboration">
     <iframe
        id="video"
        width="560"
        height="315"
        src="https://www.youtube.com/embed/SgW9T3yXfv0?start=4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"
        </div>
    
    <div id="pricing">
     <div class="card">
        <h2>Ex Machina Mansory</h2>
        <strong>$390</strong>
        <p>Four Colorway.</p>
        <p>100% Speed.</p>
        <p>Padded fiber sole.</p>
        <button>Select</button>
      </div>
        
     <div class="card">
        <h2>Ex Machina</h2>
        <strong>$550</strong>
        <p>Four Colorway.</p>
        <p>100% Speed</p>
        <p>Padded fiber sole</p>
        <button>Select</button>
      </div>
      
  <div class="card">
        <h2>Ex Machina 500</h2>
        <strong>$790</strong>
        <p>Four Colorway.</p>
        <p>100% Speed</p>
        <p>Padded fiber sole</p>
        <button>Select</button>
      </div>    
    </div>
    
    
   <footer>
     <ul>
       <li><a href="#">Privacy</a></li>
       <li><a href="#">Terms and conditions</a></li>
       <li><a href="#">Contact Us</a></li>
     </ul>
     <p>Copyrights 2021, Altissimo Sports</p>
    </footer>
  </div>
  
  


body {
  font-family: "lato",sans-sarif;
  background-color: skyblue;
}

.main{
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

#header {
  display: flex;
  max-width: 100px;
  flex-direction: column;
  align-items: center;
  padding: 15px 20px;
  position: fixed;
  left: o;
  right: 0;
  top: 0;
  background-color: #000000;
}

.logo {
  display: flex;
}

.logo img {
  width: 100px;
  border-radius: 50px;
}

.nav-bar {
  display: flex;
  flex-grow: 1;
  min-height: 80px;
  align-items: center;
}

#nav-bar ul {
  text-align: center;
  padding: 0px;
}

nav-bar ul li {
  display: black;
  margin-bottom: 20px;
}

#nav-bar ul li a {
  color: white;
  font-size: 20px;
  text-decoration: none;
}

.form {
  max-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 250px;
 }

.form form {
  display: flex;
  
  flex-direction: column;
  align-items:center;
  max-width: 430px;
  width: 100px;
}

.form form input {
  display: block;
}

.form form input:first-child {
  margin-bottom: 20px;
  max-width: 300px;
  background-color: #ffffff;
  padding: 5px;
  width: 100px;
}

.form form input:last-child {
  margin-bottom: 20px;
  background-color: #f1c40f;
  padding: 4px 20px;
  font-weight: bold;
  font-size: 18px;
  border: none;
  border-radius: 4px;
}

#features {
  max-width: 100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#features .card {
  display: flex;
  align-items: center;
}

#features .card .icon {
  max-width: 100px;
  width: 100px;
  color: #ff8c00;
  display: none;
}

#features .card .content {
  flex-grow: 1px;
  text-align: center;
}

#the-new-spx-series {
  max-width: 100px;
  margin: 50px auto;
}


#pricing {
  width: 100px;
  display: flex;
  flex-direction: column;
}

#pricing .card {
  margin: 0 auto;
  margin-bottom: 15px;
  border: 1px solid #000;
  max-width: 340px;
  width: 100px;
  border-radius: 4px;
  text-align: center;
}

#pricing .card h2 {
  background-color: #dddddd;
  color: black;
  padding: 15px 0;
  width: 100px;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
  margin-bottom: 15px;
}

#pricing .card strong {
  font-size: 24px;
}

#pricing .card button {
  border: 0;
  margin: 15px 0;
  background-color: gray;
  padding: 8px 20px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 20px;
}

footer {
  padding: 20;
  margin-top: 30px;
  text-align: center;
  background-color: #ddd;
}

footer > ul {
  padding: 0;
}

footer > ul li {
  display: inline;
}

footer > ul li:not(last-child) {
  margin-right: 10px;
}

footer > ul li a {
  color: #000;
  text-decoration: none;
}

@media (min-width: 550px) {
#features .card .icon  {
  display: block;
 }
  
  #features .card .content {
    text-align: left;
  }
}

@media (min-width: 600px) { 
  #header { 
    flex-direction: row;
    left: 5px;
    right: 5px;
}
  
  #nav-bar ul {
    width: 100px;
    display: flex;
    justify-content: flex-end;
  }
  
  #nav-bar ul il {
    display: inline;
    margin-right: 50px;
  }
  
  #nav-bar ul li:last-child {
    margin-right: 0;
  }
}

@media (min-width: 800px) {
  #pricing {
    flex-direction: row;
    align-self: center;
  }

  #pricing .card:not(last-child) {
    margin-right: 15px;
  }
}



      **Your browser information:**

User Agent is:

**Challenge:**  when i click the .nav-link button in the nav element, i am taking to the corresponding section of the landing page. 

**Link to the challenge:**
https://codepen.io/JohnPcode/pen/yLoaoZb

Hi @PrinceJohn, in order to maximise your chances of being helped, you should add a reproducible demo along side your code.
For example a Codepen link.