CSS, Centering the Menu

This should be pretty easy, but I need some help. I inherited this CSS, and it seems to be a bit messy.

Please visit http://prowodev.com/links/dh.html.

Take a look at the menu. I simply want his menu to be centered horizontally, and for the text links to be moved so that the PNG bar is the background. See the mockup here for reference: http://prowodev.com/links/mockup.html.

I'm also attaching the CSS code that controls this area. Any cleanup, in addition to above, would be appreciated! Thanks in advance.
.main-menu {background:url(images/menu-bg.png) repeat-x; padding:44px 0 0 0; margin:35px auto; height:56px;}
.main-menu li {float:left; padding:0; background:none;}
.main-menu li a {display:block; padding:10px 32px; color:#ffffff; text-transform:uppercase; text-decoration:none; font-size:18px;}
.main-menu li a:hover {color:#e7e2a1;}
.main-menu li a.active {color:#e7e2a1;}

Open in new window

Who is Participating?
Edwin HofferConnect With a Mentor Technical ExpertCommented:
Hello isaacr25,

Find this code ".main-menu" in the style.css file and update "padding:40px 0 0 0; to "padding:8px 0 0 0"

Chris StanyonConnect With a Mentor Commented:
To centre the menu horizontally, you need to add the following to your style.css

#main-menu { width: 100%; text-align:center; } 

Open in new window

And then change the style for the .main-menu li (around line 60 of style.css) to the following:

.main-menu li { display:inline-block; padding:0; background:none;}

Open in new window

i.e. drop the float and add the display

As Edwin has already pointed out - to move the menu items up, change the top padding of the .main-menu class - line 59 of style.css
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.