Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element's id. e.g. #footer)

Question

I'm currently learning to code on "Free code camp"

<link rel="stylesheet" href="styles.css">

<header id="header" >

<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt=""  </img>

<nav id="nav-bar" 


<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>

 </nav>
</header>

<video id="video" src="https://youtu.be/y8Yv4pnO7qc" </video>
<form id="form" action="https://www.freecodecamp.com/email-submit" </form>
<input id="email" name="email" placeholder="Enter your email address" type= "email" </input>
<input id="submit" type="submit" </input>

<button id="submit" </button>

</main>

I tried to google the answers, opened all sites available and I still can't find my mistakes.

Answer 1

I think it could go this way:

    <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>

 <!-- And Then, inside your main content there should be items like this: -->

        <h2 id="Features"> </h2>
        <h2 id="How-It-Works"> </h2>
        <h2 id="Pricing"> </h2>