Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Ok so I’m basically almost done but what does ’ Your #nav-bar should always be at the top of the viewport.’ mean? isnt the viewport the element in the head which makes sure it works on all devices.

Your code so far

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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,  initial-scale=1.0"/>
    <meta name="description" content="Product Landing Page Project"/>
       <title>Tea Landing Page</title>
       <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <header id="header">
      <img id="header-img" src="http://s3.amazonaws.com/gt7sp-prod/decal/84/87/80/5053615003867808784_1.png" id="header-img"/>
      <nav id="nav-bar">
        <ul>
          <li><a href="#Characters" class="nav-link">Characters</a></li>
          <li><a href="#Price" class="nav-link">Pricing</a></li>
          <li><a href="#Other-Tea" class="nav-link">Other Tea Flavors</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <p>Creative tea blends based on the characters from Genshin Impact!</p>
        <p>The first tea blend we ever made was based on the very popular geo archon Zhongli!</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/4oBpaBEMBIM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
      </section>
      <section class="main-section" id="Characters" role="region" aria-labelledby="Character-Tea-Blends">
        <h1>Characters</h1>
        <div id="gallery">
          <a href="https://www.adagio.com/signature_blend/blend.html?blend=178428" target="_blank">
          <img src="https://static.wikia.nocookie.net/gensin-impact/images/7/79/Character_Zhongli_Card.png/revision/latest?cb=20201217052506"/>
          </a>
          <a href="https://www.adagio.com/signature_blend/blend.html?blend=178418" target="_blank">
          <img src="https://static.wikia.nocookie.net/gensin-impact/images/7/76/Character_Venti_Card.jpg/revision/latest?cb=20201024042752"/>
          </a>
          <a href="https://www.adagio.com/signature_blend/blend.html?blend=179019" target="_blank">
          <img src="https://static.wikia.nocookie.net/gensin-impact/images/8/88/Character_Xiao_Card.jpg/revision/latest?cb=20200331193542" />
          </a>
          <a href="https://www.adagio.com/signature_blend/blend.html?blend=178574" target="_blank">
            <img src="https://static.wikia.nocookie.net/gensin-impact/images/0/08/Character_Diona_Card.png/revision/latest?cb=20201107193459" />
          </a>
          <a href="https://www.adagio.com/signature_blend/blend.html?blend=178473" target="_blank">
            <img src="https://static.wikia.nocookie.net/gensin-impact/images/4/48/Character_Fischl_Card.jpg/revision/latest?cb=20200331202523" />
          </a>
          <a href="https://www.adagio.com/signature_blend/blend.html?blend=178423" target="_blank">
            <img src="https://static.wikia.nocookie.net/gensin-impact/images/f/f8/Character_Albedo_Card.png/revision/latest?cb=20210302092013" />
          </a>
          <a href="https://www.adagio.com/signature_blend/blend.html?blend=178585" target="_blank">
            <img src="https://static.wikia.nocookie.net/gensin-impact/images/2/22/Character_Sucrose_Card.jpg/revision/latest?cb=20201024043113" />
          </a>
          <a href="https://www.adagio.com/signature_blend/blend.html?blend=178443" target="_blank">
            <img src="https://static.wikia.nocookie.net/gensin-impact/images/6/69/Character_Mona_Card.jpg/revision/latest?cb=20210323193416" />
          </a>
          <a href="https://www.adagio.com/signature_blend/blend.html?blend=178438" target="_blank">
            <img src="https://static.wikia.nocookie.net/gensin-impact/images/8/8d/Character_Ganyu_Card.png/revision/latest?cb=20210106062018"/>
          </a>
          <a href="https://www.adagio.com/signature_blend/blend.html?blend=178438" target="_blank">
            <img src="https://static.wikia.nocookie.net/gensin-impact/images/2/2d/Character_Kaedehara_Kazuha_Card.png/revision/latest?cb=20210607100841" />
          </a>
        </div> 
      </section>
      <section class="main-section" id="Price" role="region" aria-labelledby="Tea-Price">
        <h1>Pricing</h1>
        <div class="Tea-Pricing">
          <p class="Sample-Tin">Sample Tin</p><p class="Sample-price">$6</p>
        </div>
        <div class="Tea-Pricing">
          <p class="Sample-Tin">3oz pouch</p><p class="Sample-price">$14</p>
        </div>
        <div class="Tea-Pricing">
          <p class="Sample-Tin">5oz tin</p><p class="Sample-price">$24</p>
        </div>
      </section>
      
      <section id="Other-Tea">
        <h1>Other Tea Flavors</h1>
        <p>Another popular fan-made tea blend set we've made is our Dr. Who tea blend.</p>
        <a href="https://www.adagio.com/signature_blend/group.html?group=8" target="_blank"> <img src="https://i0.wp.com/www.blogtorwho.com/wp-content/uploads/2016/07/AdagioTeasDoctorWho.jpg?fit=4195%2C3062&ssl=1" height="400" width="500" /> </a>
      </section>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <fieldset>
          <label id="email-label"> Enter Your Email: <input required name="email" type="email" id="email" placeholder="abc123@gmail.com"/></label>
        </fieldset>
        <input type="submit" id="submit"/>
      </form>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

I’m pretty sure they mean #nav-bar should be a sticky element so it always stays on visible and on top of the user’s viewport no matter how much they scroll down.

here for ref position - CSS: Cascading Style Sheets | MDN