Build A Landing Page: Each .nav-link element should link to a corresponding element on the landing page

HTML-CSS
1

I am missing something somewhere, can someone help? I keep looking at my hrefs and section id’s but they look right to me! Number 10 rule Each .nav-link element should link to a corresponding element on the landing page keeps failing to pass.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ingredients to Meals</title>
<link href="styles.css" rel="stylesheet">
    </head>
     <body>
    <main>
      <header id="header">
        <div class="flex-container"></div>
      <img src="https://cdn-icons-png.flaticon.com/512/114/114987.png" id="header-img" alt="header image" width="100px"  loading="lazy" class="header-img">
      <h1 class="header">Ingredients to Meals</h1>
      <nav class="nav-bar" 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>
          </header>
      </main>
      <section id="Features">
        <div class="desc">
        <h3>Make delicious meals with ingredients you already have in your kitchen!</h3>
        </div>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input name="email" id="email" class="email" type="email" placeholder="Enter your email address" required>
          <input id="submit" type="submit" value="Get Started" class="submit">
          </form>
      </section>
      <section id="How-It-Works">
      <iframe id="video" src="https://www.youtube.com/embed/S-TmmjEN-V0"  allowfullscreen></iframe>
      </section>
      <section id="Pricing">
      <div class="product" id="product-one">
        </div>
        <h3>Package 1</h3>
        <ol>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
          </ol>
        </section>
      </body>
  </html>
3

you need to have enough content that the page is able to scroll

1 Like
4

I ran it through the html checker and fixed some things and I don’t know how I fixed it (because I realized I wasn’t able to scroll but didn’t know those two things were linked). Can you tell me how/why? And thank you!