How to center navigation bar in Drupal?

I'm trying to center the navigation on this page: http://66.147.244.50/~schneie1/

However, the div containing the ul of buttons take up the entire width and thus I can't do "text-align:center;"

Here's the page.tpl.php and the CSS-file:

<nav id="navigation" role="navigation" class="clearfix">    
    <?php if ($page['navigation']): ?> <!--if block in navigation region, override $main_menu and $secondary_menu-->
        <?php print render($page['navigation']); ?>
    <?php endif; ?>
    <?php if (!$page['navigation']): ?>
        <?php if ($main_menu): print $main_menu;
        endif; ?>
        <?开发者_运维百科php if ($secondary_menu): print $secondary_menu;
        endif; ?>
<?php endif; ?>
</nav> <!-- /#navigation -->

#navigation {
    margin: 0 0 1.5em; 
    padding: 0; 
    width:auto; 
    margin-left:auto; 
    margin-right:auto; 
}

#navigation ul.main-menu {
    margin:0; 
    padding: 0;
    display:block; 
    width:auto; 
}

#navigation ul.main-menu li {
    float: left; 
    margin: 0;
    padding: 0; 
}

Thanks in advance!

Change your width on your #navigation from "auto" to a value. Auto means it will extend the full width of the screen, unless you've already wrapped it in a block level element which has a fixed width. You need something for your "auto" to reference.