Not passing the last three stories

[hp3]

Tell us what’s happening:
The following stories not passing in the project.

1. Your #nav-bar should always be at the top of the viewport.

2. Your Product Landing Page should use at least one media query.

3. Your Product Landing Page should use CSS Flexbox at least once.

Your code so far’
index.html

<link

rel=“stylesheet”

href=“https://use.fontawesome.com/releases/v5.8.1/css/all.css”

integrity=“sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf”

crossorigin=“anonymous”

/>

<div class="logo">

  <img

    id="header-img"

    src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"

    alt="original trombones logo"

  />

</div>

<nav id="nav-bar">

  <ul>

    <li><a class="nav-link" href="#features">Features</a></li>

    <li><a class="nav-link" href="#how-it-works">How It Works</a></li>

    <li><a class="nav-link" href="#pricing">Pricing</a></li>

  </ul>

</nav>

<h2>Handcrafted, home-made masterpieces</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 id="features">

  <div class="grid">

    <div class="icon"><i class="fa fa-3x fa-fire"></i></div>

    <div class="desc">

      <h2>Premium Materials</h2>

      <p>

        Our trombones use the shiniest brass which is sourced locally. This

        will increase the longevity of your purchase.

      </p>

    </div>

  </div>

  <div class="grid">

    <div class="icon"><i class="fa fa-3x fa-truck"></i></div>

    <div class="desc">

      <h2>Fast Shipping</h2>

      <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>

    </div>

  </div>

  <div class="grid">

    <div class="icon">

      <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>

    </div>

    <div class="desc">

      <h2>Quality Assurance</h2>

      <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>

    </div>

  </div>

</section>

<section id="how-it-works">

  <iframe

    id="video"

    height="315"

    src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"

    frameborder="0"

    allowfullscreen

  ></iframe>

</section>

<section id="pricing">

  <div class="product" id="tenor">

    <div class="level">Tenor Trombone</div>

    <h2>$600</h2>

    <ol>

      <li>Lorem ipsum.</li>

      <li>Lorem ipsum.</li>

      <li>Lorem ipsum dolor.</li>

      <li>Lorem ipsum.</li>

    </ol>

    <button class="btn">Select</button>

  </div>

  <div class="product" id="bass">

    <div class="level">Bass Trombone</div>

    <h2>$900</h2>

    <ol>

      <li>Lorem ipsum.</li>

      <li>Lorem ipsum.</li>

      <li>Lorem ipsum dolor.</li>

      <li>Lorem ipsum.</li>

    </ol>

    <button class="btn">Select</button>

  </div>

  <div class="product" id="valve">

    <div class="level">Valve Trombone</div>

    <h2>$1200</h2>

    <ol>

      <li>Plays similar to a Trumpet</li>

      <li>Great for Jazz Bands</li>

      <li>Lorem ipsum dolor.</li>

      <li>Lorem ipsum.</li>

    </ol>

    <button class="btn">Select</button>

  </div>

</section>

<footer>

  <ul>

    <li><a href="#">Privacy</a></li>

    <li><a href="#">Terms</a></li>

    <li><a href="#">Contact</a></li>

  </ul>

  <span>Copyright 2016, Original Trombones</span>

</footer>

/css/

• {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

line-height: 1.5;

}

ul {

list-style: none;

}

a {

text-decoration: none;

}

.container {

max-width: 960px;

margin: 2rem auto 0;

overflow: hidden;

}

.logo {

width: 600px;

}

.btn {

display: inline-block;

padding: .7rem 1.3rem;

background-color: #f1c40f;

color: black;

text-transform: uppercase;

font-weight: bold;

}

#header {

background-color: #eee;

color: #333;   

}

#nav-bar {

display: flex;

justify-content: space-between;

align-items: center;

padding: .8rem 2rem;

}

#nav-bar ul {

display: flex;

}

#nav-bar ul li {

padding: 1rem 2rem;

}

.nav-link{

color: #333;

font-size: 1.2rem;

}

.message-box {

margin: 2rem;

padding: .8rem;

text-align: center;

}

.message-box h1 {

font-size: 1.8rem;

margin-bottom: 1rem;

}

.message-box input {

display: block;

margin: auto;

padding: .5rem;

width: 30%;

margin-bottom: 1rem;

}

#features {

display: flex;

flex-direction: column;

margin-top: 3rem;

margin-bottom: 3rem;

padding: 1rem;

}

#features .feature {

display: inline-flex;

justify-self: center;

align-items: center;

}

#features .feature i {

color: #ecce57;

margin-right: 3rem;

text-align: center;

}

#features .feature div {

padding: 1rem;

justify-content: center;

}

#features .feature div h2 {

font-size: 1.5rem;

margin-bottom: .5rem;

}

#how-it-works {

padding: 3rem;

margin: auto;

text-align: center;

}

#pricing {

display: flex;

padding: 3rem .2rem;

justify-content: center;

align-items: center;

text-align: center;

}

.price-box {

border: solid black 3px;

border-radius: 2px;

}

.price-box:first-child {

margin: 1rem;

}

.price-box:last-child {

margin: 1.1rem;

}

.price-box h3 {

background-color: #ddd;

padding: 1rem;

font-size: 1.2rem;

}

.price-box h2 {

padding: 1rem;

}

.price-box p {

padding: 0 4rem 1rem;

}

.price-box .btn {

display: inline-block;

margin: 1rem;

}

#main-footer {

background-color: #ccc;

padding: 1rem;

margin-top: 2rem;

display: flex;

justify-content: space-between;

overflow: hidden;

}

#main-footer div a {

color: #333;

padding: .5rem 1rem;

}

header {

position: fixed;

width: 100%;

top: 0;

left: 0;

background-color: #cc0000;

color: white;

font-family: ‘Exo 2’, sans-serif;

padding: 1em;

}

/* Tablet and Smartphone */

@media (max-width:800px) {

#nav-bar {

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 1rem;

}

#nav-bar ul li {

    padding: 1rem 1rem;

}

#features .feature div {

    padding: 1rem;

    margin: .5rem;

    text-align: center;

}

#how-it-works {

    width: 60%;

    height: 25%;

}

#pricing {

    flex-direction: column;

}

#pricing .price-box {

    margin: 1rem;

}

.price-box:first-child {

    margin-right: 0;

}

.price-box:last-child {

    margin-left: 0;

}

#main-footer {

    padding: 1rem .5rem;

    margin-top: 2rem;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

}

}

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/101.0.4951.67 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

freeCodeCamp.org

[Marmiz]

Hi @hp3 , welcome to the forum.

You might want to take a look at this post to see how to properly format your code for it to be legible here in the forum.

Also, in order to maximise you chances of getting help is always best to link a reproducible demo so that others can try and see your code in actions.