title: How do I remove the space between links?
body: <pre><code>&lt;nav id="main_nav"&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;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Forum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
  #main_nav{
      background:green;
  }
  
  #main_nav li{
      display:inline-block;
      list-style:none;
      padding:10px;
      font-weight:bold;
  }
  #main_nav li a{
      text-decoration: none;
      color:white;
      padding:10px;
  }
  
  #main_nav li{
      -webkit-transition: opacity .5s, background .5s, color .5s;
      -moz-transition: opacity .5s, background .5s, color .5s;
      -o-transition: opacity .5s, background .5s, color .5s;
  }
  
  #main_nav li:hover{
      color:red;
      background:rgba(0, 0, 200,.5);
  }
  </code></pre>
  
  <p>This is my navigation bar, but I have a problem. Between each link is a small space. When I hover over them quickly, it doesn't look nice. How do I remove it?</p>