title: How to center navigation bar in Drupal?
body: <p>I'm trying to center the navigation on this page: <a href="http://66.147.244.50/~schneie1/" rel="nofollow">http://66.147.244.50/~schneie1/</a></p>
  
  <p>However, the div containing the ul of buttons take up the entire width and thus I can't do "<code>text-align:center;</code>"</p>
  
  <p>Here's the <code>page.tpl.php</code> and the CSS-file:</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;nav id="navigation" role="navigation" class="clearfix"&gt;    
      &lt;?php if ($page['navigation']): ?&gt; &lt;!--if block in navigation region, override $main_menu and $secondary_menu--&gt;
          &lt;?php print render($page['navigation']); ?&gt;
      &lt;?php endif; ?&gt;
      &lt;?php if (!$page['navigation']): ?&gt;
          &lt;?php if ($main_menu): print $main_menu;
          endif; ?&gt;
          &lt;?php if ($secondary_menu): print $secondary_menu;
          endif; ?&gt;
  &lt;?php endif; ?&gt;
  &lt;/nav&gt; &lt;!-- /#navigation --&gt;
  </code></pre>
  
  <hr>
  
  <pre class="lang-css prettyprint-override"><code>#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; 
  }
  </code></pre>
  
  <p>Thanks in advance!</p>