Product Landing Page: nav-bar must be at the top

HTML-CSS
1

My nav-bar is fixed at the top but I can’t seem to pass this qualification. Any advice?
Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Original Trombones</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Montserrat:wght@100&display=swap" rel="stylesheet"> 
    <link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>

</head>
<body>
    <div class="page-wrapper">
        <header id="header">
          <section class="header">
            <nav id="nav-bar" class="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> 
            <img class="logo" id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo">
           
        </header>
        </section>
        <div class="container"></div>
        <section class="hero">
            <h2>Handcrafted, home-made masterpieces</h2>
            <form class="email" id="form"action="https://www.freecodecamp.com/email-submit">
                <input name="email" id="email" type="email" placeholder="Enter your email" required >
                <input id="submit" type="submit">Submit</input>
            </form>
        </section>
        <section class="features" 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 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"></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>
            </div>
        </section>
        <section class="how-it-works" id="how-it-works">
            <iframe id="video" width="560" height="315" src="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjhxa-p2pv9AhVok4kEHYESBfUQtwJ6BAgKEAI&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DG5LqrMcq1QE&usg=AOvVaw2z9tz9VRv88AqxjXARUSrG" frameborder="0" allowfullscreen></iframe>
        </section>
      <section class="cards" id="pricing">
        <section class="card">
           <div class="card-title"> <h2>Tenor Trombone</h2></div>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <button>select</button>
        </section>
        <section class="card">
            <div class="card-title"><h2>Base Trombone</h2></div>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <button>select</button>
        </section>
        <section class="card">
            <div class="card-title"><h2>Valve Trombone</h2></div>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <button>select</button>
        </section>
      </section>
    </div>
</body>
</html>

CSS:

 * not:(.card-title){ 
        background-color: #f7f2f1;
    }
    * {
   
    font-family: Montsterrat;
  }
  .logo {
   width: 100%;
    background: orange;
    border: 1px solid black;
  }
 
  #nav-bar {
    position: fixed;
    top: 0px;
    width: 100%;
    padding: 0px;
    
  }
  nav > ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
    border: 1px solid black;
  }
  a {
    color: black;
    text-decoration: none;
  }
  .hero {
    text-align: center;
  }
  .features {
    margin: 0 auto;
    width: 600px;
  }
  .features  h2 {
    text-align: center;
  }
  .icon {
    color: orange;
    padding: 10px;
    margin-left: 275px;
    margin-right: 275px;
  }
  #how-it-works {
  display: flex;
  margin-top: 71px;
  justify-content: center;
    iframe {
      max-width: 560px;
      width: 100%;
    }
}
  .cards {
    display: flex;
    flex-direction: columns;
    justify-content: space-between;
    align-items: center;
    padding: 100px;
    text-align: center;
  }
  .card {
    border: 1px solid black;
  }
  .card-title {
    background-color: orange;
    border: 0.5px solid black;
  }
  button {
    padding: 10px;
    margin: 20px;
  }

Thanks!

2

You need to give us all of your HTML and CSS before we can give you good help. Most likely there is something else going on here that we can’t see because we don’t have all of your code.

1 Like
3

Thank you for the suggestion, I’ve updated the post!

4

Two things:

  • I had to get rid of that .page-wrapper div before I could get it to pass. Not sure why, but the tests don’t seem to like it being there. Really, you don’t need it, all it’s doing is setting a font and you can do that via the body.

  • You should notice that your nav bar is not quite touching the top of the page. Something is pushing it down from the top a little. Usually this is caused by top/bottom margins on elements. You’ll want to use your browser’s dev tools inspector to figure out which elements have top/bottom margins that are pushing it down and get rid of those margins.

1 Like
5

I have tried implementing your advice but unfortunately haven’t had any luck. Here is my updated code:
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Original Trombones</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Montserrat:wght@100&display=swap" rel="stylesheet"> 
    <link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>

</head>
<body>
    <header id="header">
      <nav id="nav-bar" class="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> 
        <img class="logo" id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo">
           
   
        </header>
        <div class="container"></div>
        <section class="hero">
            <h2>Handcrafted, home-made masterpieces</h2>
            <form class="email" id="form"action="https://www.freecodecamp.com/email-submit">
                <input name="email" id="email" type="email" placeholder="Enter your email" required >
                <input id="submit" type="submit"></input>
            </form>
        </section>
        <section class="features" 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 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"></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>
            </div>
        </section>
        <section class="how-it-works" id="how-it-works">
            <iframe id="video" width="560" height="315" src="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjhxa-p2pv9AhVok4kEHYESBfUQtwJ6BAgKEAI&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DG5LqrMcq1QE&usg=AOvVaw2z9tz9VRv88AqxjXARUSrG" frameborder="0" allowfullscreen></iframe>
        </section>
      <section class="cards" id="pricing">
        <section class="card">
           <div class="card-title"> <h2>Tenor Trombone</h2></div>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <button>select</button>
        </section>
        <section class="card">
            <div class="card-title"><h2>Base Trombone</h2></div>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <button>select</button>
        </section>
        <section class="card">
            <div class="card-title"><h2>Valve Trombone</h2></div>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <button>select</button>
        </section>
      </section>
</body>
</html>

CSS:

* not:(.card-title){ 
        background-color: #f7f2f1;
    }
* {
  font-family: Montsterrat;
  }
.logo {
   width: 100%;
    background: orange;
    border: 1px solid black;
}
#nav-bar {
  position: fixed;
  top: 0px;
  width: 100%;
  padding: 0px;
}
nav > ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
  border: 1px solid black;
  margin: 0;
  padding: 0;
}
a {
  color: black;
  text-decoration: none;
}
.hero {
  text-align: center;
}
.features {
  margin: 0 auto;
  width: 600px;
}
.features  h2 {
  text-align: center;
}
.icon {
  color: orange;
  padding: 10px;
  margin-left: 275px;
  margin-right: 275px;
}
#how-it-works {
  display: flex;
  margin-top: 71px;
  justify-content: center;
  iframe {
    max-width: 560px;
    width: 100%;
  }
}
@media only screen and (min-width: 0px) {
  .cards {
    text-align: center;
  }
}
@media only screen and (max-width: 500px) {
  .cards {
    display: flex;
    flex-direction: columns;
    justify-content: space-between;
    align-items: center;
    padding: 100px;
    text-align: center;
  }
}
.card {
  border: 1px solid black;
}
.card-title {
  background-color: orange;
  border: 0.5px solid black;
}
button {
  padding: 10px;
  margin: 20px;
}
6

I figured it out! There was an extra div container I left in there. Here’s the fixed code:
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Original Trombones</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Montserrat:wght@100&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"
/>
</head>

<body>

    <header id="header">
      <nav id="nav-bar" class="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> 
    <img class="logo" id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo"> 
    </header>

    <section class="hero">
        <h2>Handcrafted, home-made masterpieces</h2>
        <form class="email" id="form"action="https://www.freecodecamp.com/email-submit">
            <input name="email" id="email" type="email" placeholder="Enter your email" required >       
            <input id="submit" type="submit"></input>
        </form>
        </section>

        <section class="features" 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 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"></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>
            </div>
        </section>

        <section class="how-it-works" id="how-it-works">
            <iframe id="video" width="560" height="315" src="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjhxa-p2pv9AhVok4kEHYESBfUQtwJ6BAgKEAI&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DG5LqrMcq1QE&usg=AOvVaw2z9tz9VRv88AqxjXARUSrG" frameborder="0" allowfullscreen></iframe>
        </section>

        <section class="cards" id="pricing">
            <section class="card">
                <div class="card-title"> 
                    <h2>Tenor Trombone</h2>
                </div>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <button>select</button>
            </section>
            <section class="card">
                <div class="card-title">
                    <h2>Base Trombone</h2>
                </div>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <button>select</button>
            </section>
            <section class="card">
                <div class="card-title">
                    <h2>Valve Trombone</h2>
                </div>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <button>select</button>
            </section>

        </section>
        
    </body>
</html>

CSS:

* not:(.card-title){ 
        background-color: #f7f2f1;
}
* {
  font-family: Montsterrat;
}
.logo {
  width: 100%;
  background: orange;
  border: 1px solid black;
}
#nav-bar {
  position: fixed;
  top: 0px;
  width: 100%;
  padding: 0px;
}
nav > ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
  border: 1px solid black;
  margin: 0;
  padding: 0;
}
a {
  color: black;
  text-decoration: none;
}
.hero {
  text-align: center;
}
.features {
  margin: 0 auto;
  width: 600px;
}
.features  h2 {
  text-align: center;
}
.icon {
  color: orange;
  padding: 10px;
  margin-left: 275px;
  margin-right: 275px;
}
#how-it-works {
  display: flex;
  margin-top: 71px;
  justify-content: center;
  iframe {
    max-width: 560px;
    width: 100%;
  }
}
@media only screen and (min-width: 0px) {
  .cards {
    text-align: center;
  }
}
@media only screen and (max-width: 500px) {
  .cards {
    display: flex;
    flex-direction: columns;
    justify-content: space-between;
    align-items: center;
    padding: 100px;
    text-align: center;
  }
}
.card {
  border: 1px solid black;
}
.card-title {
  background-color: orange;
  border: 0.5px solid black;
}
button {
  padding: 10px;
  margin: 20px;
}
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.