title: My CSS drop down menu has a space between it and the right border. How do I remove it?
body: <p>I created a css drop down menu and i am finishing it up with a border. When i added the left and bottom border everything was fine. Once i added the right border it put a gap between the right border and the drop down menu. Is there anyway to fix this?
  Here is a photo <a href="http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/563034_641717089180441_1749213926_n.jpg" rel="nofollow">http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/563034_641717089180441_1749213926_n.jpg</a></p>
  
  <p>The HTML I Used:</p>
  
  <pre><code>&lt;nav id="main_nav" class="fluid"&gt;
          &lt;ul&gt;
           &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Show Services&lt;/a&gt;
             &lt;ul&gt;
               &lt;li&gt;&lt;a href="#"&gt;Audio&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Lighting&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Power&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Special Effects&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Staging/Trussing&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Video&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Systems Integration&lt;/a&gt;
             &lt;ul&gt;
               &lt;li&gt;&lt;a href="#"&gt;Corporate and Commercial&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Digital Signage&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Entertainment&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;IP Based Systems&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;
             &lt;ul&gt;
               &lt;li&gt;&lt;a href="#"&gt;Concrets&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Installations&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Parties&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Product Launch&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Trade Shows&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Our Company&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
  </code></pre>
  
  <p>The CSS I Used:</p>
  
  <pre><code>#main_nav {
  }
  #main_nav ul {
      list-style-type: none;
      margin-top: 0%;
      margin-right: 0%;
      margin-bottom: 0%;
      margin-left: 0%;
      padding-top: 0%;
      padding-right: 0%;
      padding-bottom: 0%;
      padding-left: 0%;
      width: 100%;
      position: relative;
      float: left;
  }
  #main_nav ul li {
      float: left;
      position: relative;
      width: 20%;
      margin-top: 0%;
      margin-right: 0%;
      margin-bottom: 0%;
      margin-left: 0%;
      padding-top: 0%;
      padding-right: 0%;
      padding-bottom: 0%;
      padding-left: 0%;
      background-color: #4d4d4d;
  }
  #main_nav ul li a {
      width: 100%;
      float: left;
      text-align: center;
      text-transform: uppercase;
      color: #FFFFFF;
      text-decoration: none;
      padding-top: 0%;
      font-style: normal;
      font-weight: 400;
      font-family: allerta;
      font-size: 1em;
      display: block;
      padding-right: 0%;
      padding-bottom: 0%;
      padding-left: 0%;
      margin-top: 0%;
      margin-right: 0%;
      margin-bottom: 0%;
      margin-left: 0%;
      border-left: 0.1em solid #999999;
      border-bottom: 0.1em solid #999999;
      border-right: 0.1em solid #999999;
  }
  #main_nav a:hover, #main_nav a:active, #main_nav a:focus, #main_nav a.thispage {
      background-color: #666666;
      color: #0099FF;
      width: 100%;
  }
  #main_nav ul li ul {
      visibility: hidden;
      margin-right: 0%;
      margin-bottom: 0%;
      margin-left: 0%;
      padding-right: 0%;
      padding-bottom: 0%;
      padding-left: 0%;
      float: left;
      list-style-type: none;
      position: absolute;
      margin-top: 100%;
      padding-top: 0%;
      width: 100%;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
  }
  #main_nav ul li ul li {
      position: relative;
      float: left;
      width: 100%;
      margin-top: 0%;
      margin-right: 0%;
      margin-bottom: 0%;
      margin-left: 0%;
      padding-top: 0%;
      padding-right: 0%;
      padding-bottom: 0%;
      padding-left: 0%;
      background-color: #4d4d4d;
  }
  #main_nav ul li ul li a {
      width: 100%;
      padding-right: 0%;
      padding-bottom: 0%;
      padding-left: 0%;
      margin-top: 0%;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0%;
      float: left;
      font-style: normal;
      font-weight: 400;
      font-family: allerta;
      font-size: 0.9em;
      text-align: center;
      text-decoration: none;
      display: block;
      color: #FFFFFF;
      text-transform: uppercase;
  }
  #main_nav ul li:hover ul, #main_nav ul li:active ul, #main_nav ul li:focus ul, #main_nav ul li.thispage ul {
      visibility: visible;
      width: 100%;
  }
  </code></pre>