I have the problem, and I tried allready a lot, as i like to center my navigation, center to my site. The main issue is, that I work with amazon's sellercentral, Amazon Webstore. And I can't show the site in public, and maybe there other things, don't let me center the navigation in a normal way. Here is some code, from the navigation, and some CSS code:
<div class="com-amazon-webstore-GlobalSiteNav-2">
<ul class="linkList navigationLinks" id="globalNav">
<li class="navigationGroup" id="globalNavItem1">
<a href="http://sandbox-20150114-020100.hostedbywebstore.com/Activity/b/10715054011?ie=UTF8&title=Activity" class="mainNode">
<span>Activity</span>
</a>
<ul class="linkList navigationLinks">
<li>
<a href="http://sandbox-20150114-020100.hostedbywebstore.com/Winter-Activity/b/10715911011?ie=UTF8&title=Winter">
<span>Winter</span>
</a>
</li>
</ul>
</li>
<li class="navigationGroup" id="globalNavItem2">
<a href="http://sandbox-20150114-020100.hostedbywebstore.com/Men/b/10715058011?ie=UTF8&title=Men" class="mainNode">
<span>Men</span>
</a>
</li>
<li class="navigationGroup" id="globalNavItem3">
<a href="http://sandbox-20150114-020100.hostedbywebstore.com/Women/b/10715055011?ie=UTF8&title=Women" class="mainNode">
<span>Women</span>
</a>
</li>
<li class="navigationGroup" id="globalNavItem4">
<a href="http://sandbox-20150114-020100.hostedbywebstore.com/Children/b/10715912011?ie=UTF8&title=Children" class="mainNode">
<span>Children</span>
</a>
</li>
<li class="navigationGroup" id="globalNavItem5">
<a href="http://sandbox-20150114-020100.hostedbywebstore.com/Accessories/b/10715061011?ie=UTF8&title=Accessories" class="mainNode">
<span>Accessories</span>
</a>
</li>
<li class="navigationGroup" id="globalNavItem6">
<a href="http://sandbox-20150114-020100.hostedbywebstore.com/Brands/b/10715062011?ie=UTF8&title=Brands" class="mainNode">
<span>Brands</span>
</a>
<ul class="linkList navigationLinks">
<li>
<a href="http://sandbox-20150114-020100.hostedbywebstore.com/Main-Brands-Brands/b/10839056011?ie=UTF8&title=Main+Brands">
<span>Main Brands</span>
</a>
</li>
<li>
<a href="http://sandbox-20150114-020100.hostedbywebstore.com/More-Brands-Brands/b/10839057011?ie=UTF8&title=More+Brands">
<span>More Brands</span>
</a>
</li>
</ul>
</li>
</ul></div></div>
And here some CSS code using at the moment for this navigation:
body #wrapper #innerWrapper ul#globalNav { background-color: #EF7521; height: 40px; width:auto; text-align:center;}
#globalNav {text-align: center;}
#globalNav li {display: inline;}
#globalNav a { display: inline-block;}
/*ody #wrapper #innerWrapper ul#globalNav { background-color: #EF7521; }
body #wrapper #innerWrapper ul#globalNav { background-image: url(""); }*/
body #wrapper #innerWrapper ul#globalNav li.navigationGroup:hover { background-color: #FFAE76;}
body #wrapper #innerWrapper ul#globalNav li.navigationGroup:hover { background-image: url(""); }
body #wrapper #innerWrapper ul#globalNav li.navigationGroup:active { background-color: #FFAE76; }
body #wrapper #innerWrapper ul#globalNav li.navigationGroup:active { background-image: url(""); }
body #wrapper #innerWrapper ul#globalNav li.navigationGroup ul { background-color: #FFAE76; }
body #wrapper #innerWrapper ul#globalNav li.navigationGroup ul { background-image: url(""); }
body #wrapper #innerWrapper ul#globalNav li.navigationGroup ul li:hover { background-color: #EF7521; }
body #wrapper #innerWrapper ul#globalNav li.navigationGroup ul li:hover { background-image: url(""); }
body #wrapper #innerWrapper div ul#globalNav li.navigationGroup a.mainNode { font-family: 'Century Gothic', Helvetica, Arial, sans-serif; }
body #wrapper #innerWrapper div ul#globalNav li.navigationGroup a.mainNode { font-size: 13px; }
body #wrapper #innerWrapper ul#globalNav li.navigationGroup a.mainNode { color: #333D47; }
body #wrapper #innerWrapper div ul#globalNav li.navigationGroup a.mainNode:active { color: #FFAE76; }
body #wrapper #innerWrapper div ul#globalNav li.navigationGroup a.mainNode:hover { color: #333D47; }
body #wrapper #innerWrapper div ul#globalNav li.navigationGroup a.mainNode:visited { color: #333D47; }
body #wrapper #innerWrapper ul#globalNav li.navigationGroup .linkList li a { font-family: 'Century Gothic', Helvetica, Arial, sans-serif; }body #wrapper #innerWrapper ul#globalNav li.navigationGroup .linkList li a { color: #333D47; }
body #wrapper #innerWrapper ul#globalNav li.navigationGroup .linkList li a:hover { color: #FFAE76; }
Any idea, what and where I should change something?