Off Centered Mobile Menu

**I’m editing my newest navbar that is mobile style. The menu auto shuts on when smooth scrolling, and the page indexes don’t show in browser toolbars! That’s Great!

For whatever reason, the mobile toggle menu appears to be a bit off center,.
That’s the only issue at the moment. I have a Code Pen. On phones, this off center mobile menu is easy to notice. How can I get that fully centered? Thanks! :smiling_face_with_sunglasses:

https://CodePen.io/FavorMan/pen/WbNoOdb**

if you inspect the .nav-menu, in computed styles, you’ll notice you have a left padding of 40px. If you set padding-left to 0, it should fix your issue.

**When I click on inspect on Firefox, I see element, .nav-menu.active, and .nav-menu. Computed the way that I looked didn’t show 40px left padding. However, I added padding-left: 0, as you mentioned.

I’m not sure how to only inspect .nav-menu? And I’m not sure how padding-left: 40px could have been commuted.?

Thanks for your help! :smiling_face_with_sunglasses:**

The padding comes from default styling for lists, applied by the browser. They vary from browser to browser. A list works fine for what you are using it for, although it is not the best for accessibility. To improve this or avoid it altogether in the future, it is best to use the nav element, with nested a elements for your nav-links.

As for looking at styles on a specific element. When you open the developer tools, you can select the HTML element. Once it is highlighted, you can go to the styles to see everything applied to the element.

Okay, Thanks a lot! :grinning:

**theEphemeral or whomever: I added animated text, and that is showing over the mobile menu. Do I need to add z-index? If so where? Thanks! :smiling_face_with_sunglasses: **

I put z-index: 1; in the header CSS. Now the animated text is normal. :smiling_face_with_sunglasses: