Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Describe your issue in detail here.
I am having trouble setting the #nav-bar to the top of the viewport which is not a hard task however there seems to be something I am missing / doing right.

  **Your code so far**
/* file: index.html */
<header id="header">
<img id="header-img" src="https://images.solecollector.com/complex/images/c_crop,h_1105,w_1965,x_20,y_514/c_fill,dpr_2.0,f_auto,fl_lossy,q_auto,w_800/xfdgz9uaguocb9bn81eu/air-jordan-4-iv-retro-what-the-ci1184-146-pair"/>
<nav id="nav-bar">
    <a class="nav-link" href="header-img">
  </a>
    <a class="nav-link" href="video">
    </a>
    <a class="nav-link" href="email">
    </a>
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width, initial-scale=1.0">
</nav>
</header>
<video id="video">
<source src="https://www.youtube.com/watch?v=eeKlLL36oQQ"></source>
</video>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="email" type="email" name="email"></input>
<input id="submit" type="submit"></input>
</form>
<link rel="stylesheet" href="styles.css">
<div class="flexbox"></div>
/* file: styles.css */
.nav-bar {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.flexbox {
display: flex;
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.49

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Hey!

you’re using this selector to target the navbar in your HTML code but your navbar does not have any class named “nav-bar”

Hope this helps! :smile:

1 Like