title: Spacing between menu items (CSS)
body: <p>I have a menu that works on large screens but when the browser size is reduced in width (and the menu wraps) I can't get the menu items <em>not</em> to overlap each other.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="padding-top: 10px"&gt;
      &lt;a class="menu" style=
      "border: #B1B1B1 solid; border-width: 0px 1px 0px 1px" href="#"&gt;Design
      and Install&lt;/a&gt;&lt;a class="menu" href="#"&gt;About this site&lt;/a&gt;&lt;a class=
      "menu" href="#"&gt;Products&lt;/a&gt;&lt;a class="menu" href="#"&gt;F A Q&lt;/a&gt;&lt;a class=
      "menu" href="#"&gt;Portfolio&lt;/a&gt;&lt;a class="menu" href="#"&gt;Contact&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu {
      font-family: Verdana;
      font-size: 12px;
      color: #000;
      text-align: center;
      text-decoration: none;
      border: #B1B1B1 solid;
      border-width: 0 1px 0 0;
      padding: 10px 17px 10px 12px;
  }
  
  .menu:link,.menu:visited {
      background-color: #E5E5E5;
  }
  
  .menu:hover,.menu:active {
      background-color: #F9C232;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/9j77E/1/" rel="nofollow">http://jsfiddle.net/9j77E/1/</a></p>
  
  <p>Thanks if you can help.</p>