title: navigation bar entire width spaced items evenly
body: <p>I'm a bit new to css. I'm trying to make a horizontal navigation bar with only 3 text items for mobile device viewing. I have width set to 100% and each section width set to 32% (I tried 33% but it would place the 3rd item on a new line.) It looks ok as it is, but when I hover (or click on using a mobile device) the background color changes and you can see the margins.</p>
  
  <pre><code>ul.nav {
      width:100%;
      margin:0 auto;
      padding:0;
      list-style:none;
      display:inline-block;
      background-color:#62564A;
      text-align:center;
      font-family: sans-serif; 
  }
  
  .nav li { 
          display:inline;
      }
  
  .nav a {
      width:33%;
      text-align:center;
      display:inline-block;
      padding-bottom:13px;
      padding-top:12px;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
  }
  
  .nav a:hover { 
      background:#A26A42;
      border:none;
      width:32%
  }
  
  ul.nav li:first-child a{
      border:none;
  }
  ul.nav li:last-child a {
      border:none;
  }
  </code></pre>
  
  <p>End of CSS</p>
  
  <pre><code>&lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Search&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Legend&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Info&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="map_canvas" style="position:absolute;left:0;right:0;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thank you for any help.</p>