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.

CSS:

body {background-color:lightblue;}
#header{text-align:center;}
#nav-bar{background-color:lightblue;position:fixed; top:0; width:100%;
left:0;
text-align:center;
font-weight:bold;}
.nav-link{font-family:"courier new"; font-size:25px;}
.chunk{text-align:center;}
#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) {
  #flex-container{flex-direction:column;
 place-items:center;
 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;}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
  <br><header id="header"><h1><img src="https://i.imgur.com/Qjl6lNm.png" 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>
    </nav>  
  </h1>
<section class="chunk" id="homelawn">
  <h2>Home Lawn</h2>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/ToJlOND8TfU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
  </section>
<section class="chunk" id="refinance">
  <h2>Refinancin'</h2><br>
  <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>
  </div>  
  </section><br>
<section class="chunk" id="percent">
  <h2>Percent Signs!</h2>
  <form action="https://www.freecodecamp.com/email-submit" 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="example@email.com"><br>
      <input type="submit" form="survey-form" value="Submidge Fern" id="submit">
      </form>
</body>
</html>

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.