title: HTML/CSS: navigation bar won't fit inside the container layout
body: <p>Why does my navigation bar overflow the container, as in the linked picture:</p>
  
  <p><a href="http://i.stack.imgur.com/AGoOd.png" rel="nofollow">http://i.stack.imgur.com/AGoOd.png</a></p>
  
  <p>Here's the part that contains navigation in HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    body {
       font-family:Arial, Helvetica, sans-serif;
       background-image: url('../Images/Background1.jpg');
      }
  
  
      #wrapper {
       width: 1000px;
       margin: 0px auto;
      }
  
  
      #header {
       background-color:#FFFFFF;
       width: 100%;
       overflow: hidden;
       padding: 10px 0px;
      }
      #logo img {
       float: left;
      }
      #logo1 img {
       margin-top: 30px;
       float: right;
      }
  
  
      #banner {
       width: 100%;
       height: 50px;
       background-color: #666666;
       color:#FFFFFF;
       padding: 10px 0px;
      }
      li {
       list-style-type: none;
      }
      #nav {
       background-color: #333333;
       font-size: 13px;
       clear: both;
      }
      #nav ul {
       width: 100%;
       float: left;
       background-color: #333333;
       margin: 0px;
      }
      #nav ul li{
       display: inline;
      }
      #nav a:link {
       color: white;
      }
      #nav a:visited {
       color: white;
      }
      #nav a:active {
       color: white;
      }
      #nav a:hover {
       color: white;
       background-color: #CCCCCC;
      }
      #nav a:focus {
       color: white;
      }
  
  
      #sidebar  {
       width: 300px;
       height: 700px;
       float: left;
       background-color:#CCCCCC;
      }
  
  
      #content {
       width: 700px;
       float: right;
       height: 700px;
       background-color: #E5E5E5;
       overflow: auto;
      }
  
  
      #footer {
       width: 100%;
       background-color: #666666;
       padding: 20px 0px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="nav"&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a href="nv1.html"&gt;1&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="nv2.html"&gt;2&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="nv3.html"&gt;3&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="nv4.html"&gt;4&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="nv5.html"&gt;5&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="nv6.html"&gt;6&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="nv7.html"&gt;7&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="nv8.html"&gt;PROMOTIONS&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="nv9.html"&gt;TRANSPORTATION&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;`</code></pre>
  </div>
  </div>
  </p>