how to align nav bar and slider together

Question

ok, i am having problems with the ndex page im re building ( due to flash drive getting corrupted. :(, i want the nav bar to sit flush with the slider which is below it... at the moement the nav bat is way too the left and it doesnt look very good :/ e.g--->

i will give you both my html and my css to refer to:

HTMLof nav and slider

<div class="nav">
      <ul>
        <li class="home"><a href="">Home</a></li>


        <li class=""><a href="#">sports news</a>
          <ul>
            <li><a href="#">headlines</a></li>

             <li><a href="#">when an where</a></li>
             <li><a href="">rewind</a></li>
             <li><a href="">manager of the week </a></li>
          </ul>
           <li class=""><a href="#">music</a>
           <ul>
                     <li><a href="#">whats new</a></li>
                     <li><a href="#">the classic corner</a></li>
                     <li><a href="#">hall of fame</a></li>
                     </ul>




        </li>
        <li class="news"><a href="#">on air</a>
          <ul>
            <li><a href="#">schedule</a></li>
            <li><a href="#">presenters</a></li>
            <li><a href="#">competitions</a></li>
            <li><a href="#">guests</a></li>
          </ul>
        </li>

        <li class="contact"><a href="#">events</a></li>
        <li class="contact"><a href="#">gallery</a></li>
        <li class="contact"><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="cleaner"></div>


<div id="middle">
<div id="slider">
        <a href="#"><img src="images/slideshow/01.jpg" alt="slideshow 01" title="wow" /></a>
        <a href="#"><img src="images/slideshow/02.jpg" alt="slideshow 02" title="wow" /></a>
        <a href="#"><img src="images/slideshow/03.jpg" alt="slideshow 03" title="wow" /></a>
        <a href="#"><img src="images/slideshow/04.jpg" alt="slideshow 04" title="wow" /></a>
        <a href="#"><img src="images/slideshow/05.jpg" alt="slideshow 05" title="wow" /></a>
    </div>


</div>

CSS:

body {
    margin: 0px;
    padding: 0px;
    color: #4d4638;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    line-height: 1.7em; 
    background: url(images/tooplate_body.jpg);
    background-color: #c2b8a1;
    background-repeat: repeat-x;
    background-position: top    
}

a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }

.orange {
    color: #FC0;
}

.green {
    color: #CF6;
}

p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }

h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0;  }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }

.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }

a.more { 
    clear: both; 
    display: block; 
    width: 87px; 
    height: 31px; 
    padding-right: 15px; 
    line-height: 30px; 
    text-align: center; 
    color: #000; 
    font-weight: bold; 
    background: url(images/btn.png); 
}

a.more:hover { 
    text-decoration: none; 
    color: #960; 
}

.float_l { float: left }
.float_r { float: right }

.margin { margin: 10px; }

.image_wrapper { 
    display: inline-block; 
    border: 1px solid #cac2b1; 
    background: #b5ac98; 
    padding: 4px; 
    margin-bottom: 5px; 
}

.image_fl { 
    float: left; 
    margin: 3px 15px 0 0; 
}

.image_fr { 
    float: right; 
    margin: 3px 0 0 15px; 
}

.list { 
    margin: 20px 0 20px 20px; 
    padding: 0; 
    list-style: none; 
}

.list li { 
    color:#000; 
    margin: 0 0 5px 0; 
    padding: 0 0 0 25px; 
    background: url(images/list.png) no-repeat scroll 0 5px;  
}

.list li a { 
    color: #000; 
    font-weight: normal; 
}

.list li a:hover { 
    text-decoration: underline; 
}

#header {
    width: 960px;
    padding: 10px 0;
    margin: 0 auto;
}

#site_title { 
    float: left; 
}

#site_title h1 { 
    margin: 30px 0 0 0; 
    padding: 0; 
}

#site_title h1 a { 
    display: block; 
    width: 278px; 
    height: 50px; 
    color: #fff; 
    text-indent: -10000px; 
    background: url(images/logo.png) no-repeat; 
}

/* menu */
#menu {
    float: right;
    width: 632px;
    height: 48px;
    margin-top: 40px;
    background: url(images/menu.png)
}

#menu ul {
    width: 600px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

#menu ul li {
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    display: inline;
    text-align: center;
}

#menu ul li a {
    display: block;
    width: 116px;
    padding: 9px 4px 9px 0;
    margin: 0;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    color: #000000; 
    text-shadow: 1px 1px 1px #cec8ba;
    font-weight: normal;
    outline: none;
    border: none;
    background: url(images/menu_divider.png) center right no-repeat
}

#menu ul li a:hover, #menu ul li .current { 
    color: #fff; 
    text-shadow: 1px 1px 1px #3d3728;  
}

#menu ul .last { 
    background: none; 
}

#search_box { 
    float: right; 
    margin: 12px 0 0 0; 
    width: 170px; 
    height: 27px; 
    background: url(images/search.png) no-repeat; 
}

#search_box form { 
    clear: both; 
    width: 170px; 
    height: 26px; 
    padding: 0; 
    margin: 0; 
} 

#searchfield { 
    float: left; 
    display: block; 
    height: 16px; 
    width: 130px; 
    padding: 5px; 
    font-size: 12px; 
    color: #ccc; 
    line-height: 0; 
    background: none; 
    border: none; 
} 

#searchbutton { 
    float: right; 
    display: block; 
    height: 26px; 
    width: 30px; 
    padding: 0; 
    margin: 0; 
    cursor: pointer;
    background: none; 
    border: none; 
}

/* end of menu */

/* slider */

#middle { 
    clear: both;
    width: 940px;
    height: 307px;
    padding: 10px 40px;
    margin: 0 auto;
    background: url(images/middle_home.png) no-repeat
}

#middle_subpage { 
    clear: both;
    width: 820px;
    height: 207px;
    padding: 60px 100px;
    margin: 0 auto;
    font-family: Georgia, "Times New Roman", Times, serif;
    background: url(images/middle_subpage.png) no-repeat;
}

#middle_subpage h2 { 
    font-size: 48px; 
    color: #000; 
}

#middle_subpage p { 
    font-size: 18px; 
    color: #000; 
    line-height: 30px; 
}

#middle_subpage a { 
    color: #507921; 
    font-weight: normal; 
}

#slider {
    float: right;
    width: 940px;
    height: 300px; 
    overflow: hidden;
}

/* end of slider */

#main {
    clear: both;
    width: 960px;
    padding: 30px 0;
    margin: 0 auto;
}

.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }

.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }

.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }

#cp_contact_form { 
    margin: 10px;
    padding: 0; 
    width: 412px; 
}

#cp_contact_form form { 
    margin: 0px; 
    padding: 0px; 
}

#cp_contact_form form .input_field { 
    width: 400px; 
    padding: 10px;
    border: 1px solid #ccc;  
    background: #fff;
    color: #333;  
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

#cp_contact_form form label { 
    display: block; 
    width: 100px; 
    margin-right: 10px; 
    font-size: 14px; 
}

#cp_contact_form form textarea { 
    width: 400px; 
    height: 160px; 
    padding: 10px; 
    border: 1px solid #ccc;  
    background: #fff;
    color: #333;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

#cp_contact_form form .submit_btn { 
    margin: 5px 0px;
    padding: 5px 14px; 
    text-decoration: none; 
    border: 1px solid #ccc;  
    background: #fff;
    font-size: 14px;  
}

#map {
    margin: 10px;
}

#map img { 
    width: 300px; 
    height: 200px; 
    border: 1px solid #d9d3c5; 
    background: #b5ac98; 
    padding: 7px; 
    margin-bottom: 10px; 
}

.news_box { 
    clear: both; 
    margin-bottom: 30px; 
    padding-bottom: 30px; 
    border-bottom: 1px dashed #333; 
}

.news_box h2 { 
    font-size: 20px; 
    margin-bottom: 0; 
}

.news_box p.date { 
    color: #000; 
}

.news_box img { 
    float: left; 
    padding: 4px; 
    border: 1px solid #000; 
    margin-right: 30px; 
}

.news_box a.more { 
    clear:none; 
    float: right; 
}

.sb_lp_box { 
    clear: both; 
    margin-bottom: 20px; 
}

.sb_lp_box img { 
    border: 1px solid #cac2b1; 
    background: #b5ac98; 
    padding: 8px; 
    margin-bottom: 10px; 
}

.post_box { 
    clear: both; 
    margin-bottom: 30px; 
}

.post_box h2 { 
    font-size: 20px; 
    margin-bottom: 10px; 
}

.post_box p.post_meta { 
    margin-bottom: 0; 
}

.post_box p span.cat a { 
    color: #507921; 
    font-weight: 400; 
}

.post_box img { 
    width: 550px; 
    height: 160px; 
    border: 1px solid #cac2b1; 
    background: #b5ac98; 
    padding: 8px; 
    margin-bottom: 10px; 
}

.post_box a.more { 
    float: left; 
}

.lbe_box { 
    clear: both; 
    margin-bottom: 20px; 
}

.lbe_box h3 { 
    font-size: 16px; 
    margin-bottom: 0; 
}

.lbe_box h3 a { 
    color: #507921; 
    font-size: 16px; 
    font-weight: normal; 
}

.lbe_box h3 a span { 
    font-size: 12px; 
    color: #507921; 
}

.lbe_box p { 
    margin-bottom: 0; 
}

.lbe_box p.date { 
    font-size: 10px; 
    font-weight: 700; 
    color: #507921; 
}

#gallery { 
    margin: 0; 
    padding: 0; 
}

#gallery ul { 
    margin: 0; 
    padding: 0;
}

#gallery ul li { 
    display: block; 
    float: left; 
    width: 281px; 
    margin: 0 30px 30px 0; 
    padding: 8px; 
    border: 1px solid #d0c9b8; 
    background: #b6ac97; 
}

#gallery ul .third { 
    margin: 0 0 30px 0; 
}

#gallery ul li a img { 
    border: 1px solid #ccc; 
    margin-bottom: 5px; 
}

#footer_wrapper {
    clear: both;
    width: 100%;
    background: #a19882;
    border-top: 10px solid #d0c8b4;
}

#footer {
    width: 960px;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
    color: #000;
    background:  url(images/footer.jpg) top center no-repeat
}

    color: #5fa008; 
    font-weight: normal;


}

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* Sub Menus */
.nav li li {
  font-size: .8em;
}



@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
    }


    .nav ul{
    position:relative;
    z-index:9999;
}

}

Answer 1

Add this to your CSS:

.nav {
    margin-right: auto;
    margin-left: auto;
    clear: both;    
}

I made a fiddle for testing: http://jsfiddle.net/8x1fkpoe/