title: Gaps between buttons when using float: center
body: <p>I am trying to create a menu at the top of my webpage. I have four buttons I am attempting to connect together at the top of the webspage to make a menu. I am using </p>
  
  <pre><code>float: center;
  </code></pre>
  
  <p>They are centered but there are small gaps between my buttons. Here is a snippet of my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div align="center"&gt;
                  &lt;a href="index.html"&gt;
                      &lt;button align="right" type="button" class="menu1"&gt;&lt;span&gt;1. Things you need&lt;/span&gt;&lt;/button&gt;
                  &lt;/a&gt;
                  &lt;a href="setup.html"&gt;
                      &lt;button align="right" type="button" class="menu2"&gt;&lt;span&gt;2. Setting up your website folders&lt;/span&gt;&lt;/button&gt;
                  &lt;/a&gt;
                  &lt;a href="extrainfo.html"&gt;
                  &lt;button align="right" type="button" class="menu3"&gt;&lt;span&gt;3. Extra Information&lt;/span&gt;&lt;/button&gt;
                  &lt;/a&gt;
                  &lt;a href="layout.html"&gt;
                      &lt;button align="right" type="button" class="menu4"&gt;&lt;span&gt;4. HTML Layout&lt;/span&gt;&lt;/button&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu1 {
      border-radius: 10px 0px 0px 10px;
      padding: 10px 25px;
      background-color: #00FF00;
      text-align: center;
      border: 1px solid #FFFF00;
      width: auto;
      height: auto;
      float: center;
      font-weight: bold;
      font-family: "Arial Black", Gadget, sans-serif;
  }
  
  .menu2 {
      padding: 10px 25px;
      background-color: #00FF00;
      text-align: center;
      border: 1px solid #FFFF00;
      width: auto;
      height: auto;
      float: center;
      font-weight: bold;
      font-family: "Arial Black", Gadget, sans-serif;
  }
  
  .menu3 {
      padding: 10px 25px;
      background-color: #00FF00;
      text-align: center;
      border: 1px solid #FFFF00;
      width: auto;
      height: auto;
      float: center;
      font-weight: bold;
      font-family: "Arial Black", Gadget, sans-serif;
  }
  
  .menu4 {
      border-radius: 0px 10px 10px 0px;
      background-color: #00FF00;
      padding: 10px 25px;
      text-align: center;
      border: 1px solid #FFFF00;
      width: auto;
      height: auto;
      float: center;
      font-weight: bold;
      font-family: "Arial Black", Gadget, sans-serif;
  }
  </code></pre>
  
  <p>I'm sure there is a simple way around this, but I just can't get my head around it.</p>
  
  <p>Thanks in advance!</p>