Why can't I center my navbar?

HTML-CSS
1

Tell us what’s happening:
I have passed all requirements, but it would look better if the nav bar was centered. I got it to center a few times, but then it no longer stayed at the top. Any suggestions?

Also, why does the nav bar go behind the video?

Your code so far
https://codepen.io/jessicjames/pen/JjKdVLO

Your browser information:

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

Challenge: Build a Product Landing Page

Link to the challenge:

2

try adding this to your #nav-bar:

#nav-bar {
...rest of code...
width: 100%;
display: flex;
justify-content: center;
z-index: 2;
}

Edit (2):
Your nav-bar goes behind the video because you have given it fixed positioning. Since your nav element comes before your video element, the latter would be on top (think of it as a stack, newer elements come on top). To fix it, you can just add a z-index property on your nav-bar.

Edit: If you want to learn about flexbox, you can check out: https://www.w3schools.com/css/css3_flexbox.asp

Edit (2): Learn more about z-indexes: https://www.w3schools.com/cssref/pr_pos_z-index.asp

Hope this helps! Happy coding!