Hi friends! So I know there are a million+ questions about centering the navbar/centering divs (I know because I’ve read through them all trying to solve this) but I’m still struggling to center my navbar. Even if I make the width 100% there’s still a gap to the left of the bar so I know that something is wrong with my positioning. I’m guessing it’s something to do with my nesting but I can’t figure out what.
Any help is greatly appreciated!
P.S. I know my nav links are not “listed”. This is a choice and I don’t think it should change anything re: formatting.
When you put position:fixed on the <nav> then it basically becomes absolute positioning, and using margin: auto won’t work any more for centering. So you’ll have to figure out a way to use left or right property to shift it over enough to center it.
One way I did it is to set the width on the menu in rems and then you can shift it left by 50% minus half the rem width.
At some point you are probably going to want to use a media query to change the layout of the menu for narrow screens (such as switch to a hamburger menu), so that will make it responsive.
Your current solution of using percentages does work, but as you narrow the browser the menu isn’t wide enough to hold all of the links in one row and rearranges them into multiple rows. That’s probably fine for this project but in the “real world” I doubt that is something that the designer would be happy with.
<body></body> tag should contain all of your presentation code (div, ul, p, nav, header, article, etc.) not the other way round.
You have assigned left: 30% to the nav that will set the fixed positioned nav to start after 30% of the viewport width from left.
Since nav is nested inside relative positioned website div with auto left-right margin, the starting point of nav becomes the same as the starting point of the website div, which is not extreme left. Since you are fixed positioning the nav, bring it outside of all the other divs and position it independently. Even better, for what you are trying to achieve for nav, use position:sticky instead
The spelling of position attribute in #website is wrong.
If you fix these issues, you should be able to get the result you are aiming for.