CSS menu bar centered with dropdown

Working on a menu bar that has counter active css classes. I need the menu bar centered and the drop downs to be under the proper list item. I can get one or the other but not both to work at the same time. The menu bar changes sizes, so putting a static margin left on it will not work. This is what the menu bar should look like but it's not centered.

And this is what happens when i remove the float: left from #mainmenu ul li{}. It's now centered, but the items that belong under the user name are all shifted left.

Why does this happen? and how do i get around it?

html:

<div id="mainmenu">
    <?php
    if(Yii::app()->user->name)
    $display_name = Yii::app()->user->name;
    if(strlen($display_name) > 11){
        $display_name = substr($display_name,0,9);
        $display_name =$display_name.'...';
    }
    ?>
    <?php $this->widget('zii.widgets.CMenu',array(
        'items'=>array(
            array('label'=>'Home', 'url'=>array('/site/index')),
            array('label'=>'My Tickets', 'url'=>array('/ticket/mytickets'), 'visible'=>!Yii::app()->user->isGuest),
            array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
            array('label'=>'Contact', 'url'=>array('/site/contact')),
            array('label'=>'Schools', 'url'=>array('/school'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>'Teams', 'url'=>array('/team'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
            array('label'=>'Games', 'url'=>array('/game'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>'Users', 'url'=>array('/user'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>'Tickets', 'url'=>array('/ticket'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>'Team Placement', 'url'=>array('/tournamentresults'), 'visible'=>Yii::app()->user->id == 'admin'),
            array('label'=>$display_name, 'url'=>array('#'), 'visible'=>!Yii::app()->user->isGuest,
                    'items' => array(
                array('label'=>'Edit User', 'url'=>array('/company/index')),
                array('label'=>'Log-out', 'url'=>array('/site/logout'))
    ),


            ),
        ),
    )); ?>
</div><!-- mainmenu -->

Generated HTML code:

<div id="mainmenu">
   <ul id="yw0">
    <li class="active"><a href="/index.php/site/index">Home</a></li>
    <li><a href="/index.php/ticket/mytickets">My Tickets</a></li>
    <li><a href="/index.php/site/page?view=about">About</a></li>
    <li><a href="/index.php/site/contact">Contact</a></li>
    <li><a href="/index.php/site/#">SirRahal</a>
        <ul>
            <li><a href="/index.php/company/index">Edit User</a></li>
            <li><a href="/index.php/site/logout">Log-out</a></li>
        </ul>
    </li>
    </ul>    
</div>

CSS code:

 #mainmenu
{
height:33px;
margin: auto;
text-align:center;
}

#mainmenu ul li
{
display: inline;
float: left;
margin: auto;
}

#mainmenu ul li a
{
color: #fbf3e1;
font-size:14px;
padding-top:5px;
padding-bottom:5px;
width:217px;
background: #33332c;
}

#mainmenu ul li ul {
display: none;
position: absolute;
margin-left: -20px;
}

#mainmenu ul li:hover > ul {
display: block;
}

#mainmenu ul li a:hover, #mainmenu ul li.active a
{
color: #f5921e;
border-bottom: solid 5px #f5921e;
text-decoration:none;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

Replace your CSS like this, using your LI elements for styling rather than your A elements:

body {
    width:100%;
}
#mainmenu {
    display: block;
    width:100%;
}
#mainmenu ul {
    width:100%;
}
#mainmenu ul li {
    display: inline-block;
    position:relative;
    margin: auto;
    width:19%;
    background: #33332c;
    padding-top:5px;
    padding-bottom:5px;
}
#mainmenu ul li a {
    color: #fbf3e1;
    font-size:14px;
}
#mainmenu ul li ul {
    display: none;
    position: absolute;
}
#mainmenu ul li:hover > ul {
    display: block;
    width:auto;
    position:absolute;
    top:30px;
    left:0;
    background: #33332c;
    padding:10px;
}
#mainmenu ul li:hover > ul li {
    display: block;
    width:150px;
    height:auto;
}
#mainmenu ul li a:hover, #mainmenu ul li.active a {
    color: #f5921e;
    border-bottom: solid 5px #f5921e;
    text-decoration:none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

You may need some additional adjustments, but there you have the basics

See fiddle here