Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

The code I am using for this project works, and follows the instructions, but every time I run the tests, 3 always come back as failed, no matter what I change. All three failed tests are related to the navbar. (not all nav-link elements have an href, not all nav-link elements link to something on the page, and the navbar should stick to the top of the viewport) can you help?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Goldfish Page</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <header id="header">
    <div class="headbar"> 
      <img src="https://pix11.com/wp-content/uploads/sites/25/2018/07/goldfish-cracker-2.jpg" alt="goldfish" id="header-img" class="img1">
      <nav id="nav-bar">
        <ul>
          <li class="nav-link"><a href="#What_Are_Goldfish">What Are Goldfish?</a></li>
          <li class="nav-link"><a href="#Why_Goldfish">Why Goldfish?</a></li>
          <li class="nav-link"><a href="#Buy_Now">BUY NOW!</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <div id="What_Are_Goldfish">
      <h1 class="wag">What Are Goldfish?</h1>
      <p>Goldfish are light and airy crackers, made with real cheese!</p>
    <video id="video" src="123vid.com"></video>  <p> Watch Our Video!</p>
    </div>
    <div id="Why_Goldfish">
      <h1>Why Should You Buy Goldfish?</h1>
      <p>Goldfish are the best. Honestly, you should buy them but be careful because other sites could be sketchy (not ours though)...</p>
    </div>

    <div id="Buy_Now">
      <h1>BUY HERE NOW</h1>
      <form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
        <label for="email">Enter Your Email:</label>
        <input id="email" type="email" name="email" placeholder="johndoe@gmail.com" required>

        <label for="credit-card">Enter Your Credit Card:</label>
        <input id="credit-card" type="text" name="credit-card" placeholder="1234 5678 9098 7654" required>

        <label for="ccv">CCV:</label>
        <input id="ccv" type="text" name="ccv" placeholder="123" required>

        <label for="date">Expiration Date:</label>
        <input id="date" type="text" name="date" placeholder="04/26" required>

        <label for="ssn">For Extra Goldfish, Enter SSN:</label>
        <input id="ssn" type="text" name="ssn" placeholder="123-45-6789">

        <input type="submit" id="submit" class="btn" value="Submit">
      </form>
    </div>
  </main>
</body>
</html>

/* file: styles.css */
#nav-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white; 
  z-index: 1000;
}

.headbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#nav-bar ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#nav-bar li {
  margin: 0 10px;
}

#nav-bar a {
  text-decoration: none;
}

@media screen and (max-width: 780px) {
  .headbar {
    flex-direction: column;
    align-items: center;
  }

  #nav-bar {
    text-align: center;
  }
}
.img1 {
  width:80px;
  height:80px;
  padding-top:50px;
}
input {
  display:block;
  margin:10px auto;
}
label {
  text-align:center;
}
h1, p {
  text-align:center;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

This literally means exactly what it says. Your nav-link elements must have an href attribute. But they currently do not.
Example of a nav-link element from your code:

<li class="nav-link">

Move the class to the anchor element instead.

3

Hello,
You should, first, move the class nav-link from the li elements to the a elements inside of them
In your CSS, change the #nav-bar selector to select the header itself through its id and remove the z-index property