Hey Guys, I've been experiencing a problems with this navigation menu I've been building.

I would like to create a menu that evenly distributes the menu items evenly across the available width it has. Which I have successfully created following this: http://stackoverflow.com/questions/4...enu-in-htmlcss

The problem is that I would like to give this menu a max width of 60em (54em + 3em left & right padding) and centre horizontally in the available page width.

The natural solution would be to add a #wrapper with text-align: center; and set the menu div to display: inline-block; - this however breaks the spacing distribution.

I can't think of how to fix this one. Any help would be great.


HTML Code:
	#wrapper {
		text-align: center;
		border-bottom: 1px black solid;
	#backnav {
		margin-top: 3.15em;
		text-align: justify;
		padding: 0 3em;
		overflow-x: auto;
		overflow-y: hidden;
		/*display: inline-block;*/

	#backnav ul {
		display: inline;
		padding: 0;
		margin: 0;
		white-space: nowrap;
	#backnav li {
		display: inline-block;
		list-style: none;
		padding: .65em 0 .65em;
		font: .75em "Georgia", Serif;
	#backnav li.current {border-bottom: 2px black solid;padding: .65em 1em .65em;}
	#backnav li:hover {border-bottom: 2px #444444 solid;}
	#backnav li.current:hover {border-bottom: 2px black solid;}
	#backnav span {
		display: inline-block;
	  	position: relative;
	#backnav li a {
		text-decoration: none;
		padding: 1em 1em;
	#backnav li a:link { color:#000000 }
	#backnav li a:visited { color:#000000 }
	#backnav li a:hover { color:#444444; }
	#backnav li a:active { color:#444444 }

	<title>Navigation Menu</title>
<div id="wrapper">	
<div id="backnav">
		<li class="current">Menu1</li>
		<li><a href="Menu2/">Menu2</a></li>
		<li><a href="Menu3/">Menu3</a></li>
		<li><a href="Menu4/">Menu4</a></li>
		<li><a href="Menu5/">Menu5</a></li>