title: How to prevent overlapping borders of list elements in an unordered list
body: <p>So I have a horizontal navigation bar I created by floating the list elements of an unordered list. It works fine but at the places where two list elements meet two borders form to create double the desired thickness. Is there a way to solve this?</p>
  
  <p><strong>One Solution Attempted:</strong>
  I can specify the left and right border properties of individual list elements but this approach doesn't seem very scalable, but it works.</p>
  
  <p>You can view my code and demo here <a href="http://jsfiddle.net/mscpg/" rel="nofollow">http://jsfiddle.net/mscpg/</a>
  or inspect the code below</p>
  
  <p><strong>css</strong></p>
  
  <pre><code>  #navigation_bar {
              overflow: hidden;
              list-style-type: none;
              width: 100%;
          }
              #navigation_bar li {
                  text-align: center;
                  float: left;
                  width: 33%;
                  border-style: solid;
                  border-width: 1px;
                  border-color: black;
              }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="navigation_bar"&gt;
      &lt;li&gt;Projection&lt;/li&gt;
      &lt;li&gt;Real-Time&lt;/li&gt;
      &lt;li&gt;Cleanup&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>