title: CSS Nav Bar Padding and Overflow
body: <p>So I have a horizontal navigation bar styled in CSS. My issue is that there seems to be some bottom padding on the bar, but I do not know where it is coming from.</p>
  
  <p>Additionally, when the nav bar becomes really narrow (resizing the window, mobile, etc), it overflows out of the encircling div. How can I prevent this?</p>
  
  <p>Here is the JSFiddle:</p>
  
  <p><a href="http://jsfiddle.net/m8pWa/" rel="nofollow">http://jsfiddle.net/m8pWa/</a></p>
  
  <p>CSS:</p>
  
  <pre><code> html, body {
      margin: 0;
      padding: 0;
      background-color: #E0F2F7;
  }
  .header {
      margin: 0 auto;
      text-align: center;
      background-color: #81BEF7;
      padding: 1px;
      color: #FAFAFA;
  }
  ul {
      margin: 0;
      padding: 0;
  }
  .nav {
      margin: 0 auto;
      padding: 0;
      width: 75%;
      height: 2em;
  }
  .nav ul li {
      list-style-type: none;
      display: inline;
      overflow: hidden;
  }
  .nav li a {
      display: block;
      float: left;
      padding: 5px 10px;
      color: #fff;
      text-decoration: none;
      border-right: 1px solid #fff;
  }
  .nav li a:hover {
      background: white;
      color: #A4A4A4;
  }
  .nav-wrapper {
      background-color: #58ACFA;
      padding: 1px;
  }
  .wrapper {
      margin-right: auto;
      margin-left: auto;
      width: 75%;
  }
  /* this centers the internal elements */
   .centered {
      text-align: center;
  }
  /* gives a main content window to the left that is 70% of the main */
   .content {
      width: 70%;
      float:left;
  }
  /* makes a sidebar to the right that is 30% of the main and floating right */
   .sidebar {
      width: 30%;
      float:right;
  }
  .sidebar ul {
      padding: 10px;
  }
  </code></pre>