title: Navigation bar white space
body: <p>Sorry, this is probably a really simple question, but I have searched for two days and can't seem to find the answer.  This is my first blog and I don't have any prior experience with CSS or html - just been playing with it since Sunday.  It's fun...and frustrating.  </p>
  
  <p>Anyhow...in my new blog for work (http://kentlawcso.blogspot.com/) I have a chunk of white space at the end of my navigation bar under the header.  I've searched the web and tried different solutions, but I can't seem to find the right balance of getting rid of the white space and not causing the "volunteer opportunities" to go to the next line (if it works in Chrome, it doesn't in IE).  The code for that bar is below.  Any thoughts on how to stretch the nav bar all the way to the right header border.  Increasing padding pushes it to the next line in some browsers too.  </p>
  
  <p>Thanks in advance for any help!  </p>
  
  <pre><code>#list-nav
  {
  padding:0;
  overflow: hidden;
  margin:-20;
  }
  
  #list-nav li 
  {
  display:inline;
  }
  
  #list-nav li a 
  {   
  font-family:Arial;
  font-size:12px;
  text-decoration: none;
  float:left; 
  padding:12px;
  background-color: #333333;
  color:#ffffff;
  border-bottom:1px;
  border-bottom-color:#000000;
  border-bottom-style:solid;
  }
  
  #list-nav li a:hover 
  {
  background-color:#9B1C26;
  padding-bottom:12px;
  border-bottom:2px;
  border-bottom-color:#000000;
  border-bottom-style:solid;
  margin:-1px;
  }]]&gt;&lt;/b:skin&gt;
  </code></pre>