Help with Navigation Bar [SOLVED]

I’m trying to make a very basic navigation bar centered underneath my name and a small image. I have spent quite a bit of time trying to get it to center, but it just won’t. I know I could create the same thing with a paragraph and just making hyperlinks, but every other navigation menu I look at is done with an unordered list.

The closest I’ve come to centering has been using bootstraps “text-center” but it is still pushed a little to the right (maybe because of an invisible bullet point?) I’ve tried list-style-type: none; but it hasn’t helped.

I feel like this should be really easy by setting all the margins to 0 auto, but I’ve had no luck with that. What am I missing?

Here is a link to my project: https://codepen.io/derekbmcintire/pen/vydjrr

just fixed it!

used * { margin: 0; padding: 0;}

2 Likes

Hi Derek, you just need to add padding-left: 0; to your nav-list.

your .nav-list is a UL as you know, but when you remove the list-style, you are still left with the area of padding that the bullet points would have sat in. Hence remove the padding :slight_smile:

Mark