Conditions not met in Product Landing Page - Build a Product Landing Page

I keep getting an “X” on this condition " Each .nav-link element should have an href attribute." and the 3 ones that come after it + the last 3 conditions. I don’t see what is wrong with my code so any help would be appreciated. Thank you!

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Shop</title>
</head>
<body>
<header id="header">
        <img src="candles.png" alt="candles logo" id="header-img">
        <nav id="nav-bar">
            <ul>
                <li id="home" class="nav-link"><a href="#home_text"><i class="bi bi-house"></i> Home</a></li>
                <li id="video" class="nav-link"><a href="#video"><i class="bi bi-youtube"></i> Video</a></li>
                <li id="newsletter" class="nav-link"><a href="#form"><i class="bi bi-newspaper"></i> Newsletter</a></li>
                <li id="products" class="nav-link"><a href="#fc"><i class="bi bi-cart2"></i> Products</a></li>
            </ul>
        </nav>
</header>

<main>
    
    <section id="home_text">
        <h3>Welcome to our shop!</h3>
        <p>Here you will find a list of over 20 candles that we handmake individually. <br>
        You may join our newsletter below to get discounts and be notified when we drop a new candle scent!
        </p><br>
        <p class="comment"><i>The photos below were taken from <a href="https://www.bathandbodyworks.com" target="_blank">Bath & Body Works website</a>. I own no rights whatsoever.</i></p>
    </section>
    
    
    <iframe width="560" height="315" src="https://www.youtube.com/embed/GjtlkpnW1J0?controls=0" title="YouTube video player" id="video"></iframe>
    <div id="form_div">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
        <label>Join our newsletter : <input type="email" id="email" name="email" placeholder="email address"></label>
    <input type="submit" value="Submit" id="submit">
    </form>
</div>
<div id="products">
    <div class="prod" id="fc">
        <img src="https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.21a/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw430e7c6c/hires/026597001.jpg?sh=471&yocs=q_s_" alt="" class="candle_photo"> 
       <h2>Laundry Day</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis, dolor quis facilisis ultricies, tellus enim tincidunt sapien, nec feugiat ipsum nisi aliquet turpis.</p> 
        <button class="buy">Add to cart</button>
    </div>
    <div class="prod" id="sc">
        <img src="https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.21a/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwcda2cc8e/hires/026588599.jpg?sh=471&yocs=q_s_" alt="" class="candle_photo">
        <h2>Paris Café</h2>
       <p>Sed enim nunc, venenatis a dui non, imperdiet venenatis dolor. Integer vehicula justo vel neque varius eleifend. Aliquam et imperdiet dui. In volutpat et enim nec luctus.</p>
       <button class="buy">Add to cart</button>
    </div>
    <div class="prod" id="tc" class="candle_photo">
        <img src="https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.21a/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwf67d42d4/hires/026577556.jpg?sh=471&yocs=q_s_" alt="" class="candle_photo">
        <h2>Fresh Balsam</h2>
       <p>Donec consectetur convallis metus, sit amet dictum dolor. Curabitur fringilla dui eu pellentesque interdum. Nam ultrices felis nunc, et rutrum erat lacinia nec.</p>
       <button class="buy">Add to cart</button>
    </div>
    <div class="prod" id="foc">
        <img src="https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.21a/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw57901366/hires/026619695.jpg?sh=471&yocs=q_s_" alt="" class="candle_photo">
        <h2>White Tea & Sage</h2>
       <p>Praesent molestie tempor tortor tincidunt lobortis. Maecenas pellentesque tellus eget nisi semper, nec hendrerit ligula eleifend. Sed mattis ac arcu sed finibus.</p>
       <button class="buy">Add to cart</button>
    </div>
</div>

</main>
<div id="footer">
<a href="https://www.flaticon.com/free-icons/horror" title="horror icons">Horror icons created by Freepik - Flaticon</a>
<p>The above link is for the candles logo (copyrights owned by the author).</p>

</div>
</body>
</html>

/*CSS*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #FEFEFEff;
}
body, a, ul {
    color: #1f0c07;
}
#header img {
    width: 70px;
    height: 70px;
}
main {
    position: relative;
}
#header {
    display: flex;
    
    top: 0;
    justify-content: space-between;
    align-items: center;
}
#header li {
    display: inline-block;
    padding-left: 30px;
    padding-top: 15px;
}
#header li:last-of-type {
    padding-right: 15px;
}

#header-img {
    width: 40px;
    height: 40px;
    margin: 15px;
}
a, ul {
    text-decoration: none;
}
#nav-bar {
    list-style: none;
}
#home_text {
    margin-top: 100px;
    text-align: center;
}
h3 {
    font-weight: 600;
}
#products {
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}
.prod {
    border: 2px solid black;
    margin: 20px;
}
iframe {
    display: block;
    margin: 50px auto;
    
}
#products h2 {
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    font-size: 25px;
}
#products p {
    text-align: justify;
    padding: 0 15px 15px 15px;
    font-size: 14px;
    color: rgb(90, 0, 0)
}
.candle_photo {
    width: 110px;
    height: 100%;
    display: block;
    margin: 0 auto;
    
    
}
.buy {
    cursor: pointer;
    background-color: #D0DCA0ff;
    display: block;
    margin: 0 auto 5px auto;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    border: 2px solid #D0DCA0f3;
    

}
.buy:hover {
   
    background-color: #D0DCA0c3;
}


#footer {
    text-align: end;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 10px;
    width: 100%;
    height: 30px;
    background-color: lightgray;
    
}
#footer a:hover {
    color: rgba(90, 0, 0, .6);
}
#form_div {
    text-align: center;
    margin: 50px auto;
    
}
.bi {
    padding-right: 5px;
}
.comment {
    font-size: 12px;
    
}
@media only screen and (max-width: 585px) {
    #products {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; 
    }
    #header img {
        position: relative;
        margin: 10px auto;
        
    }
    nav {
        margin: 10px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        
      }
      iframe {
        height: 50%;
        width: 50%;
    }
    #header {
        flex-wrap: wrap;  
    }
    nav li {
        padding: auto 5px;
      }
      nav > ul {
          flex-direction: column;
        }
    
    .candle_photo {
        width: 40%;
        height: 40%;
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

I think the nav-link class needs to go on the a element, not the li element.

Thank you!
I used the CSS below to make my navbar fixed to the top, but the test still has it as X. Can anyone tell me what is wrong? Thank you!

#header {
position: fixed;
width: 100%;
display: flex;
top: 0;
justify-content: space-between;
align-items: center;
background: linear-gradient(0deg, #FEFEFEff, rgb(192, 155, 192));
}

The test is:

“Your #nav-bar should always be at the top of the viewport.”

Setting the #header to a fixed position isn’t necessarily going to fulfill this requirement, especially since you have an img before the #nav-bar.

If you need more help with this then I would open a new topic (since this one is marked resolved) and be sure to include your most current HTML and CSS.