Not sure what I'm doing wrong

HTML-----

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<header id="header">
   <nav id="nav-bar"> 
    <img id="header-img" src="https://tppwebsolutions.com/wp-content/uploads/logo-demo3.png" alt="company logo">
      <ul>
      <li class="nav-link"><a href="#about-us">About Us</a> </li>
      <li class="nav-link"><a href="#products">Products</a></li>
      <li class="nav-link"><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</header>
<main id="main">
  <div id="name">
    <h1 id="title"> The Company </h1>
  <h2 id="about-us"> About Us</h2>
  <p id="description">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  </div>
  <div id="products">
    <h2> Our Products</h2></br>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/5Peo-ivmupE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
  </iframe>
  </br>
    <img class="product-img" src="https://images.pexels.com/photos/6602777/pexels-photo-6602777.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="product-one">
    <img class="product-img" src="https://images.pexels.com/photos/4674372/pexels-photo-4674372.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="product-two">
    <img class="product-img" src="https://images.pexels.com/photos/6574737/pexels-photo-6574737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="product-three">
    <img class="product-img" src="https://images.pexels.com/photos/4258936/pexels-photo-4258936.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="product-four">
    <img class="product-img" src="https://images.pexels.com/photos/6142146/pexels-photo-6142146.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="product-five">
    <img class="product-img" src="https://images.pexels.com/photos/4488653/pexels-photo-4488653.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="product-six">
    <article>
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
    </article>
  </div>
  <div id="pricing">
    <h2>Our Prices</h2>
    <div class="prices">
      <h3 class="bronze">Basic Plan</h3>
      <p>Lorem ipsum dolor sit amet</p>
      <h3 class="silver">Pro Plan</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed</p>
      <h3 class="gold">Premium Plan</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque, lectus non ultrices aliquet, turpis tellus sagittis ex, quis gravida</p>
    </div>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <label for="email">Submit your email to receive a pamphlet with our services and products.</label>
      <input type="email" id="email" name="email" placeholder="eg. john.doe@gmail.com">
      <input type="submit" id="submit" value="submit">
    </form>
  </div>
</main>

CSS -------------

body {
  font-family: sans-serif;
 }
#header-img {
  height: 80px;
  display: inline-block;
  float: left;
}
.nav-link {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
}
#nav-bar {
  text-align: right;
  background-color: silver;
  width: 100%;
  position: fixed;
  top: 0;
}
ul {
  display: inline-flex;
}
a {
  display: block;
  color: gray;
  text-align: center;
  margin: 10px;
  padding: 5px 80px;
  text-decoration: none;
}
a:hover {
  color: black;
}
@media screen and (max-width:900px){
  a{
    padding:5px 50px;
  }
}
#name{
  text-align: center
}
h1{
  margin-top: 150px;
  font-size: 36px;
}
.product-img{
  width: 150px;
}

I’ve gone very far from what I was supposed to do, because I played around with the code, tested out stuff, and only then remembered to check if I’m on the right path. Turns out, I was done a while ago, but the “testing thingy” doesn’t recognize my nav-bar as working. Did I do it wrong, and what did I do wrong?

It’s the Responsive Web Design-Build a Product Landing Page test.

it wants the element itself to have a class of nav link. youve given the parent element class of nav link. if you fix this issue it will pass

1 Like

God, once I read your reply it came to me. /facepalm
Thank you! :smiley:

1 Like

@CA_Tomislav, in the future when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
1 Like