title: How do I make my navbar expand/extend the entire page?
body: <p>I have purchased the following wordpress theme: <a href="http://themeforest.net/item/healthpress-health-and-medical-wordpress-theme/full_screen_preview/3138064" rel="nofollow">http://themeforest.net/item/healthpress-health-and-medical-wordpress-theme/full_screen_preview/3138064</a></p>
  
  <p>I need to make the navbar extend along the entire width of page, can someone help? Here's an image to show what i'm trying to do and Here's the CSS code for the navbar.</p>
  
  <p><a href="http://i.stack.imgur.com/ZLdsF.jpg" rel="nofollow">http://i.stack.imgur.com/ZLdsF.jpg</a></p>
  
  <pre><code>#header .main-nav { 
                      height: 21px; 
                      width: 100%; 
                      padding: 0px 0px 20px 0px;
                      margin-top: 90px;
                      background-color:#46a1b4; 
                      background-clip: padding-box; 
                      -moz-background-clip: padding-box; 
                      -webkit-background-clip: padding; 
                      border-radius: 3px; 
                      -moz-border-radius: 3px; 
                      -webkit-border-radius: 3px;  
                      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,0))); /* Saf4+, Chrome */
                      background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* Chrome 10+, Saf5.1+ */
                      background-image:    -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* FF3.6 */
                      background-image:     -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* IE10 */
                      background-image:      -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* Opera 11.10+ */
                      background-image:         linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0));
  }
  .ie7 #header .main-nav{ z-index:9600; }
  .page-template-template-home-with-sidebar-php #header .main-nav,
  .page-template-template-home-php #header .main-nav{ background-clip: padding-box; -moz-background-clip: padding-box; -webkit-background-clip: padding; position: absolute; left: 0px; bottom: 0px; border-radius: 3px 3px 0px 0px; -moz-border-radius: 3px 3px 0px 0px; -webkit-border-radius: 3px 3px 0px 0px; }
  #header .main-nav &gt; ul { float: left; }
  .ie7 #header .main-nav &gt; ul { z-index:9700; }
  #header .main-nav &gt; ul &gt; li { float: left; border-right: 1px solid #54aec2; position: relative; }
  #header .main-nav &gt; ul &gt; li:first-child { border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; }
  #header .main-nav &gt; ul &gt; li:last-child { border: none; }
  #header .main-nav ul li a { display: inline-block; padding: 0px 20px; font-size: 13px; line-height: 41px; text-align: center; color: #fff; text-shadow: 1px 1px 0px #20606d; }
  #header .main-nav ul li:hover { background-color: #377f8f; background-clip: padding-box; -moz-background-clip: padding-box; }
  #header .main-nav ul li ul { display: none; width: 220px; padding: 12px 0px; background-color: #377f8f; position: absolute; top: 41px; left: 0px; z-index: 8899; border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; }
  .ie7 #header .main-nav ul li ul{ z-index:9800; }
  #header .main-nav ul li ul li { width: 196px; height: 34px; padding: 0px 12px; position: relative; }
  #header .main-nav ul li ul li a { display: inline-block; line-height: 34px; padding: 0px 9px;  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
  #header .main-nav ul li ul li:hover { background-color: #2c6774; }
  #header .main-nav ul li ul li ul { top: -12px; left: 220px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
  .ie7 #header .main-nav ul li ul li ul { z-index:9900; }
  #header .main-nav .responsive-nav { display: none; width: 100%; margin:10px auto 0px; padding:5px; border:1px solid #CCC; }
  </code></pre>
  
  <p>Any help will be highly appreciated.</p>