Build a Product Landing Page: nav-bar

HTML-CSS
1

Tell us what’s happening:

I can’t my nav bar to pass the test about it being at the top of the viewport. I’ve done everything that I can think of to make it fixed. When I make it fixed, it goes away. When I make it relative, it works, but it won’t pass the test. I’ve looked at a couple other landing pages and they have a relative position, so I’m not sure where I’ve gone wrong. Can anyone help?

//update: i have made it pass with this:
#nav-bar {
width:100%;
margin: auto;
position: fixed;
top: 5px;
}
but it makes the nav bar go away when I look at the page//

why :confounded:

Your code so far

nav { background-color: black; color: white;
font-family: “Comic Sans MS”, monospace;
font-size: 20 px;
width: 50%;
margin: auto;
display: inline-flex;
justify-content: space-between;
position: relative;
top: 5px;
height: auto;
}
Your browser information:

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

Link to the challenge:

2

Hi Misty!

I had the same problem and solved it by giving the relevant section the attribute of “0em”

For instance:

#nav-bar {
top: 0em;
}

Happy coding!

3

Awesome, I’ll try that! Thank you!