CSS menu highlight size mismatch - html

Question

In my main horizontal navigation, I have a container called #main-nav, and buttons in the form of anchor tags within. The anchor tag size won't match up with the #main-nav container, and I can't figure out why.
oh, also, the dropdown menus sit higher on the baseline of the menu than they should a few pixels, I'm not sure if this is related.
I currently have the highlight color and dropdowns the same as the menu bar to disguise the problem, but this isn't optimal. (A code inspector clearly shows the problem)
My site is http://www.darkmatter-designs.com/
Any help would be greatly appreciated, I've run out of ideas.

Answer 1

Use max-width and margin 0 auto to center your ul in nav
#main-nav ul {
/* display: inline-block; */
position: relative;
max-width: 960px;
margin: 0 auto;
}
CSS Centering:
If you just want the anchors to be "centered":
#main-nav ul {
position: relative;
/* display: inline-block; */
max-width: 960px;
margin: 0 auto;
text-align: center;
}
#main-nav ul li {
/* float: left; */
display: inline-block;
}
To fixe the dropdown you can add padding-top to #main-nav ul ul
#main-nav ul ul {
background: #1E344A;
position: absolute;
top: 100%;
z-index: 1;
padding-top: 3px;/*was added*/
}
and since you are using position absolute to ul ul make sure you add position:relative to the parent element like this:
#main-nav ul li {
float: left;
position: relative;/*was added*/
}