I am trying to create a website for my business and I cannot seem to center the navigation at the top of the screen and have the areas to the left and right of the screen be filled with the same bg color as the UL. I know usually you would set the margins to 0 auto to center that element on the page but for some reason its not working and the UL is just sticking to the left part of the screen. If anybody knows how to get this centered or how to fix my html/css i would sincerely appreciate it. Here is my code (html then css):

<body>
<div class="wrap">
<div class="menu">
<ul>
<li><a href="products.html" target="_self" >Products</a>
<ul>
<li><a href="seaisland.html" target="_self">Sea Island Collection</a></li>
<li><a href="grandoak.html" target="_self">Grand Oak Collection</a></li>
<li><a href="airflow.html" target="_self">Air-Flow </a></li>
<li><a href="pure.html" target="_self">Pure Visor</a></li>
<li><a href="coldweather.html" target="_self">Cold Weather</a></li>
<li><a href="fahrenheit.html" target="_self">Fahrenheit Collection</a></li>
<li><a href="caddietowels.html" target="_self">Caddie Towels</a></li>
<li><a href="woventowels.html" target="_self">Woven Towels</a></li>
<li><a href="sunprotection.html" target="_self">Sun Protection</a></li>
<li><a href="" target=""></a></li>
</ul>
</li>
<li><a href="embelishments.html" target="_self" >Embellishments</a>
<ul>
<li><a href="embroidery.html" target="_self">Embroidery</a></li>
<li><a href="wovenlabels.html" target="_self">Woven Labels</a></li>
<li><a href="medallions.html" target="_self">Medallions</a></li>
<li><a href="laserappliques.html" target="_self">Laser Appliques</a></li>
<li><a href="ballmarkers.html" target="_self">Ball Markers</a></li>
<li><a href="ultrasuede.html" target="_self">Ultra Suede</a></li>
</ul>
</li>
<li><a href="specials.html" target="_self" >Specials</a> </li>
<li><a href="whatsnew.html" target="_self" >Whats New</a> </li>
<li><a href="order.html" target="_self" >Order</a> </li>
<li><a href="contact.html" target="_self" >Contact</a> </li>
</ul>
</div>


body{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
background-color:#b7b7b7;
padding: 0px;
overflow:auto;
border: #0F0 solid 5px;
margin: auto;
}

.wrap{
margin:0 auto;
background-color:b7b7b7;
border:0px;
padding:0px;

}

.menu{
border:0px;
padding:0px;
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
background-color:#F0F;
}
.menu ul{
background:#b7b7b7;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}