Centering my body to the menu and the rest of the page

问题

I need to center this menu so when the browser is being sized it doesn't "uncenter" with the body. I've been trying to figure this out and it has just stumped me. I just need the body and the menu to all stay together, move together, and center together.

html-

<div id="logo">
    <a href="KJ's Ski Store Home.html"><img src="Ski Store Logo.png" alt="logo" height="85"            width="85"/></a>
    </div>
    <div id="nav">
    <ul>
    <li><a href="KJ's Ski Store Home.html">Home</a></li>
    <li>
    <a href="KJ's Ski Store Home.html">Store</a>
    <ul id="subnav">
    <li><a href="snowboards.html">Snowboards</a></li>
    <li><a href="boots.html">Boots</a></li>
    <li><a href="helmets.html">Helmets/Hats</a></li>
    <li><a href="goggles.html">Goggles</a></li>
    </ul>
    </li>
    <li><a href="location.html">Location</a></li>
    <li><a href="location.html">Contact Us</a></li>
    </ul>
</div>
div style="float: left; width: 400px; height: 400px; margin-left: 5%;">
<img alt="slide" src="slideshow1.jpg" name="slide" width="400" height="400"/>
</div>
<div style="float: left; width: 15%;"></div>
<div id="battle" style="float: left; width: 40%;">
<h1>Snowboarding or Skiing</h1>
<p> "<strong>Snowboarding has been better than skiing since it was invented</strong> and   nothing has changed
with that in the last, roughly, 30 years. Skiers and snowboarders get along these days, 
share the slopes and even ride together, but snowboarding is still a superior sport. It's
mellow that you followed us into the world of freestyle riding and we're happy to share 
our terrain parks and half pipes with you. We even let you hit our jibs. We don't mind 
that skiers rode our coattails into the X Games and now even the Olympics (I'm talking 
freestyle skiing here.) We're totally down with you guys and gals even if you are 
two-plankers. Nevertheless, snowboarding will always be on top."</p>
<h4>Brad Farmer, Fuel T.V.</h4>
</div>

CSS-

body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
}

ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li { 
background: #555; 
display: block; 
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#nav a:link{
color: #000000;
}
#nav a:visited{
color: #000000;
}
#nav a:hover{
color: #ffffff;
}
#nav a:active{
color: #000000
}
#nav a{
text-decoration: none;
}
#subnav a:link{
color: #ffffff;
}
#subnav a:visited{
color: #ffffff;
}
#subnav a:hover{
color: #ffffff;
}
#subnav a:active{
color: #ffffff;
}

ul{ 
display: inline-flex; 
}


#logo{
text-align: center;
}

#battle h1{
text-align: center;
}
#battle p{
text-align: center;
}