Can't pass two tests in Product Landing Page project

I’m not able to pass the two below user stories:

User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link.
User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.

Here’s my HTML code:

<header id='header'>
  Header
   <img id="header-img" src='https://www.freecodecamp.com/email-submit'>
<nav id='nav-bar'>

    <ul>
      <li><a href='#form' id='nav-link'>Form</a></li>
      <li><a href='#video' id='nav-link'>Video</a></li>
      <li><a href='#submit' id='nav-link'>Submit</a></li>
    </ul>
 </nav>

</header>

I’m getting these two error messages in the codepen test suite:

:x:4. I can see at least three clickable elements inside the nav element, each with the class “nav-link”.

There are not at least 3 elements with a class of “nav-link” within the #nav-bar element : expected 0 to be at least 3

:x:5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

The #nav-bar contains no .nav-link: expected 0 to be at least 1

I tried my best to solve this myself for two days but I can’t see what’s wrong with my code? Any suggestions?

where have you used this class?

1 Like

Ahhhh, yes, I haven’t! I mistook the id’s for the classes! Thank you so much!

important reminder: ids must be unique, you can’t give the same id to more than one element

1 Like

Yes, I still can’t believe how stupid I was! :sob: Thanks again!

id s must be unique and “#id” is used for ids in css and “.class” is used for classes in css to select or point that particular id/class

1 Like