Question

I am sure this question has been asked, and usually I can accomplish this with margin: 0 auto; or something else, but on this site: otgtires.com I cannot seem to get the navigation bar on top to center within its parent element. I would paste some code here but I think using dev tools in your browser is easier. Please let me know what I am missing!

EDIT: Zoom out if it already seems centered.

So if you zoom up the browser on the site, you will see that all the other elements keep their positions relative to each other, but the navigation bar keeps to the left. I want the nav bar to stay centered on the page no matter how zoomed in/out the users window is.

Answer 1

It’s not “centered” because it’s currently using a percentage-based width. Try a fixed width instead:

#top_navigation {
    width: 500px;
    margin: 0 auto;
    }

Edit:

Also, consider using the following clear-fix since the navigation elements are inline and the content below tends to get mixed up when the browser width is shortened:

#top_navigation {
    overflow: hidden;
    }

Here’s a screenshot of your site with the above code injected demonstrating the horizontal centering: