Build a Product Landing Page- navbar error

I’ve been trying for hours to understand why I have " 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 )." this error coming up. It seems that the first nav-link doesnt link to the part. Can someone please help me out? here’s my code:

<!DOCTYPE>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Trading Signals</title>
</head>
<body>  
  <header id="header">
   <nav id="nav-bar">
      <ul>
        <li><a href="#feat" class="nav-link">Features</a></li>
        <li><a href="#Howitworks" class="nav-link">How it works</a></li>
        <li><a href="#Pricing" class="nav-link">Pricing</a></li>
      </ul>
    </nav>
    <h1 class="header-title">Maria's Premium Trading Signals</h1>
    <p id="under">For Serious Day Traders Only</p>
    <img src="https://img.freepik.com/premium-vector/trading-logo_10250-1938.jpg" alt="our logo" id="header-img" max-width="100" height="300/>      
  </header>

  <section id="feat">
    <h1 >Features</h1>
    <h2>SAFE AND RELIABLE DAILY ALERTS</h2>
    <p class="explanation">Signal Skyline delivers daily alerts to your phone, email or web account. Whether you’re a first-timer or an experienced trader, our signals take the pressure off by telling you where and when to invest safely.</p>
    <h2>A TEAM OF SAVVY MARKET ANALYSTS</h2>
    <p class="explanation">All our trading signals are generated by a team of analysts who are experts in the forex and commodities markets. And because we profit when you do, you can trust Signal Skyline to deliver the results.</p>
    <h2>NO CONFUSING INFORMATION DUMPS</h2>
    <p class="explanation">nlike our competitors, Signal Skyline won’t confuse you with charts and info packs. We’ll just provide the need-to-know buy, sell and stop-loss points that will help you invest safely while minimizing risk.</p>    
  </section>

<!--How it works section-->
  <section id="Howitworks">
    <h2>How to use trading signals</h2>
    <ol>
      <li class="steps">Create a trading account with Mt4</li>
      <li class="steps">Log in to your account and open the trading platform</li>
      <li class="steps">Select ‘signals’ from our menu</li>
      <li class="steps">Choose from our suggested signals (ie ‘Buy FTSE 100’, or ‘Sell EUR/GBP’)</li>
      <li class="steps">View the trading signal and accompanying analysis</li>
      <li class="steps">Simply click to activate the signal</li>
    </ol>
  </section>

<!--Video section-->
  <section>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/lcsDZW_hxwc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen id="video"></iframe>
  </section>

<!--Pricing section-->
  <section id="Pricing">
    <div class="products">
      <h2 class="myproduct">7 Days Trial</h2>
      <p class="description"> 10$</p>
      <p class="price">New to signals! Try our risk free 7 days trial. Cancel anytime</p>
      <ol>
        <li class="steps">6 to 8 Signals in Day</li>
        <li class="steps">24/5 Market Scanning</li>
        <li class="steps">Regular Customer Support</li>  
      <ol>
      <input type="submit" value="Buy Now" class="buy"></input>
    </div>
    <div class="products">
      <h2 class="myproduct">STANDARD PLAN</h2>
      <p class="description">Our best selling package. Don’t miss opportunity with Realtime notification.</p>
      <p class="price">50$ / Month</p>
       <ol>
        <li class="steps">15 to 20 Signals in Days*</li>
        <li class="steps">24 Forex Pair Signals</li>
        <li class="steps">3 Commodity Pair Signals</li>
        <li class="steps">Realtime Notification</li>  
      <ol>
      <input type="submit" value="Buy Now" class="buy"></input>
    </div>
    <div class="products">
      <h2 class="myproduct">GOLDEN PLAN</h2>
      <p class="description">500$ / Month</p>
      <p class="price">Special made for full time trader. Expert level with maximum articles offered</p>
      <ol>
        <li class="steps">8 Indices Signals</li>
        <li class="steps">10 Stock Market Signals</li>
        <li class="steps">3 Commodity Pair Signals</li>
        <li class="steps">Premium Customer Support</li>  
      <ol>
      <input type="submit" value="Buy Now" class="buy"></input>
    </div>
  </section>

<!--Form section-->
  <form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
    <input id="email" name="email" type="email" placeholder="Write your email"></input>
    <input type="submit" id="submit"></input>
  </form>

</body>
</html>

you forgot to close the height attribute value with a double quote to match the opening one.
This can cause many problems (probably the reason you are struggling)

ps. you may want to put all your styling in styles.css file and link to it

Magic! Thank you sooo much! It’s been driving me crazy for hours!

1 Like