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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.