Center a horizontal menu with an image in the middle - image

Question

I am trying to center my menu bar with my logo in the middle. right now everything is floating but it wont center to the middle of the page. Also when it is centered i need the background image that i placed on the left and right side of the logo to resize according to the width of the page - here is a link to how it looks live - Menu Test
on my website i still have the original menu I created where I placed the logo behind the menu bar and set a longer width so that the background would stretch but it won't auto adjust because of it.... Current Menu
I know my code is not perfect so please just bear with me
html
<div id="access">
<div class="menu-container">
<ul id="menu-left" class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Services
</li>
</ul><!--END of menu-navigation-left-->
<ul id="menu-center">
<li class="menu-item">
<img src="images/logo.png" alt="Menu">
</li>
</ul> <!--close div center-->
<ul id="menu-right" class="menu">
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Contact
</li>
<li class="menu-item">
Portfolio
</li>
</ul><!--END of menu-navigation-left-->
</div><!--END of menu-navigation-container-->
</div><!--END of access-->
css
header {
position:fixed;
}
#access {
width:100%;
overflow:hidden;
left:50%;
}
#access ul.menu{
display: inline-block;
}
#access ul {
}
#access ul a{
display:block;
}
#access ul#menu-left {
height:120px;
background-image:url(../images/menu.png);
}
#access ul#menu-center {
height:120px;
}
#access ul#menu-right {
height:120px;
background-image:url(../images/menu.png);
}
ul, li {
margin:0px;
padding:0px;
list-style:none;
float:left;
display:block;
}
#access a {
display: block;
font-size: 16px;
line-height: 15px;
padding: 13px 10px 12px 10px;
text-transform: titlecase;
text-decoration: none;
font:"Mc1regular", Arial, sans-serif;
}
a:link{
color:#fff;
}
a:visited{
color:#fff;
}

Answer 1

This should sort out your alignment issues.. just replace with your specs. I would just have one menu and centre it.
PLEASE NOTE, YOUR HEADER POSITION IS FIXED> position:relative would be better..
div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}
div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding-right: 20px;
}
a {
display: block;
color: #a29060;
text-decoration: none;
}
<div class="container">
<div class="box">
<div class="top">
<ul >
<li>Contact</li>
<li>Policies</li>
<li><img class="logo" src="images/logo.jpg" alt="logo" /></li>
<li>Policies</li>
</ul>
</div>
see this fiddle
http://jsfiddle.net/yvytty/RJ4Yp/
You can also have a look at this (it's not finished) but it has the basic layout sorted, menus etc
https://www.yve3.com/index.html
This is also a link to a great forum, HTML.net. They give you good opinions of your site and have a lot of expertise (just like here)
http://www.html.net/forums/