Text inside a menu item is not centered - CSS - css

Question

The menu itens are not centered inside the space when it is hovered.
I tried to set text-align:center in the #menu li but it didn't work.
This image help to understand what is going on:
http://s2.postimg.org/r86nygkeh/CSS.png
<ul id="menu">
<li>Home<!-- Begin Home Item -->
</li><!-- End Home Item -->
<li>4 columns<!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h3>This is a heading title</h3>
</div>
<div class="col_1">
<ul>
<li>ThemeForest</li>
<li>GraphicRiver</li>
<li>ActiveDen</li>
<li>VideoHive</li>
<li>3DOcean</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>NetTuts</li>
<li>VectorTuts</li>
<li>PsdTuts</li>
<li>PhotoTuts</li>
<li>ActiveTuts</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>FreelanceSwitch</li>
<li>Creattica</li>
<li>WorkAwesome</li>
<li>Mac Apps</li>
<li>Web Apps</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>Design</li>
<li>Logo</li>
<li>Flash</li>
<li>Illustration</li>
<li>More...</li>
</ul>
</div>
<div class="col_4">
<h2>This is a heading title</h2>
</div>
<div class="col_1">
<ul>
<li>ThemeForest</li>
<li>GraphicRiver</li>
<li>ActiveDen</li>
<li>VideoHive</li>
<li>3DOcean</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>NetTuts</li>
<li>VectorTuts</li>
<li>PsdTuts</li>
<li>PhotoTuts</li>
<li>ActiveTuts</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>FreelanceSwitch</li>
<li>Creattica</li>
<li>WorkAwesome</li>
<li>Mac Apps</li>
<li>Web Apps</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>Design</li>
<li>Logo</li>
<li>Flash</li>
<li>Illustration</li>
<li>More...</li>
</ul>
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
</ul>
CSS
/* Navigation Bar */
#menu {
list-style:none;
width:882px;
/* width:100%; */
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Background color and gradients */
background: #c92424;
background: -moz-linear-gradient(top, #dd4343, #9e1c1c);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd4343), to(#9e1c1c));
/* Borders
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff; */
}
#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 0px 4px 0px;
margin-top:7px;
border:none;
width:110.25px;
}
#menu li:hover {
height:21px;
margin-top:1px;
padding: 11px 0px 11px 0px;
/* Background color and gradients */
background: white;
/* background: -moz-linear-gradient(top, #e56e6e, #e56e6e);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e56e6e), to(#e56e6e)); */
}
#menu li a {
font-family:Arial, Verdana, sans-serif;
font-weight: bold;
font-size:14px;
line-height:21px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
}
/* Drop Down */
.dropdown_2columns,
.dropdown_4columns {
margin:11px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #c92424;
border-top:none;
/* Gradient background
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_2columns {width: 280px;}
.dropdown_4columns {width: 560px;}
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_4columns{
left:-1px;
top:auto;
}
/* Columns */
.col_1,
.col_2,
.col_4{
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_4 {width:550px;}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Verdana, sans-serif;
font-weight: bold;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}

Answer 1

I think your padding-right is messing it up
#menu li .drop {
padding-right: 21px; //comment out this guy and try again
}
in chrome, you can right click on the nav, select inspect element, and chrome will hilight the element, the element's padding, and the elements margins in different colors so you can see why the layout is the way it is
hope that helps!

Answer 2

changed your #menu li a to
#menu li a:link, #menu li a:active {
font-family:Arial, Verdana, sans-serif;
font-weight: bold;
font-size:14px;
line-height:21px;
color: #EEEEEE;
display:inline;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
padding:0;
margin:0;
}

Answer 3

It's because the actual text (IE "4 Columns") is wrapped in an <a> tag. Remove text-align:center; from both menu li and menu li:hover then add these two rules to menu li a
#menu li a {
width:110.25px;
text-align: center;
}
Those two rules in addition to the rules you already have of course.
Here is the DEMO