Product Landing Page: Navbar Top of Viewport

I am currently attempting the Product Landing Page, and have the code all written. I am passing all of the test, save for “Your #nav-bar should always be at the top of the viewport.” However, as far as I can tell, in the preview my nav bar already does this.


body {background-color:lightblue;}
#nav-bar{background-color:lightblue;position:fixed; top:0; width:100%;
.nav-link{font-family:"courier new"; font-size:25px;}
#video{border:10px solid slategrey; border-radius:20px 10px 20px 10px;}
#flex-container{display:flex; flex-direction:row; justify-content:space-around;
gap:15px; }
@media (max-width: 600px) {
 gap:15px; }

.ref-box{width:250px; height:150px; background-color:blue; font: bold 20px "courier new"; color:white; padding: 5px; border-radius: 20px 10px 20px 10px; }
 #form{background-color:lightgrey; width:25%; margin:auto; padding:10px; border-radius: 20px 10px 20px 10px;}
.smalltext {font-size:12px;}


<!DOCTYPE html>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
  <br><header id="header"><h1><img src="" alt="Senor Cardgage Mortgage" id="header-img"></h1><header><br>
    <nav id="nav-bar">
      <a href="#homelawn" class="nav-link">Home Lawn</a> |
      <a href="#refinance" class="nav-link">Re-financin'</a> |
      <a href="#percent" class="nav-link">Percent Signs</a>
<section class="chunk" id="homelawn">
  <h2>Home Lawn</h2>
<iframe id="video" width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
<section class="chunk" id="refinance">
  <div id="flex-container">
    <div id="option1" class="ref-box">Fancy talkin' experts! <br>
      <p class="smalltext">Experts may not be hushpush-leopold</p> </div>
    <div id="option2" class="ref-box">Chik-Fil-A!
      <p class="smalltext">Chik-Fil-A must be purchased separately</p></div>
    <div id="option3" class="ref-box">Leg up on the pile!
      <p class="smalltext">Sever your leg please, it's the greatest day</p></div>
<section class="chunk" id="percent">
  <h2>Percent Signs!</h2>
  <form action="" id="form" class="chunk">
      <label for="email" id="email-label">Sign up for our newsledger todays:</label>
      <input type="email" id="email" name="email" required placeholder=""><br>
      <input type="submit" form="survey-form" value="Submidge Fern" id="submit">

You’ve got some issues with your HTML, specifically in the header and the h1. I would run your HTML through a validator. These issues are causing the test to fail even though you have the CSS set up correctly.

Also, get rid of all of those <br>s. The use case for <br> is very limited and you definitely do not need to use it between elements like that.