title: I have overlapping buttons in HTML5
body: <p>I have two buttons, one on the left, and one on the right. For some reason when I zoom in, I see my main button, and a bigger one behind it. They both change color when I hover, and are both clickable, but only the main one at the front links me where I want to go. I want the mysterious appearing button behind the main one to disappear. I think it may have something to do with the width, but it is set at 180px, and the height is auto.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="setupstylesheet.css"&gt;
          &lt;title&gt;Setting up Your Website Folders&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="body"&gt;
              &lt;img src="Images/web-development-banner.jpg" width="100%" height="400"&gt;
              &lt;h1 class="webheading"&gt;Website Developement&lt;/h1&gt;
              &lt;div class="margin"&gt;
                  &lt;div class="shading"&gt;
                      &lt;h1&gt;2. Setting Up Your Website Folders&lt;/h1&gt;
                      &lt;p&gt;In order to have a website, you need to have it set our in a specific way, but make it easy to navigate. This is how you set up your website folders and files:&lt;/p&gt;
                      &lt;ol&gt;
                          &lt;li&gt; Create a folder on your hard drive or a USB called "Website".&lt;/li&gt;
                          &lt;li&gt;Open a blank Notepad++ document.&lt;/li&gt;
                          &lt;li&gt;Save the blank document in your "Website" folder with the name "Index", and a file extension of ".html".&lt;/li&gt;
                          &lt;li&gt;Open another blank Notepad++ document and call it "StyleSheet" with the file extension of ".css". Save it in your "Website: folder as well.&lt;/li&gt;
                          &lt;li&gt;Inside your "Website" folder, create another folder called "Images".&lt;/li&gt;
                          &lt;li&gt;If you wish to include music on your website, create another folder in your "Website" folder called "Audio".&lt;/li&gt;
                      &lt;/ol&gt;
                      &lt;p&gt;Your website folder should now look something like this:&lt;/p&gt;
                      &lt;img src="Images/webfolderdemo.jpg" width="80%" height="80%"&gt;
                      &lt;p&gt;Remember whenever you add pictures, put them in the "Images" folder, and music or other audio, put in the "Audio" folder."
                      &lt;div class="needs"&gt;
                          &lt;a href="index.html"&gt;
                              &lt;button type="button" class="needs"&gt;1. Things you need&lt;/button&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="extrainfo"&gt;
                          &lt;a href="extrainfo.html"&gt;
                              &lt;button type="button" class="extrainfo"&gt;3. Extra Information&lt;/button&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#body {
      background: url(Images/bigimage.jpg);
      background-color:#000000;
      background-size: 100% 100%;
      width: auto;
      height: auto;
      background-repeat: no-repeat;
      background-attachment: fixed;
      margin: 0px;
      margin-top: 0px;
      color: #FFFFFF;
  }
  
  .webheading {
      size: 300px;
      text-align: center;
      color: #FFFF00;
      font-family: "Arial Black", Gadget, sans-serif;
  }
  
  .needs {
      display: inline-block;
      font-weight: bold;
      font-family: "Arial Black", Gadget, sans-serif;
      border: 2px solid #FFFF00;
      background-color: #00FF00;
      border-radius: 10px;
      height: auto;
      width: 180px;
  }
  
  .needs:hover {
      background-color: #4CAF50;
      color: white;
  }
  
  .extrainfo {
      float: right;
      display: inline-block;
      font-weight: bold;
      font-family: "Arial Black", Gadget, sans-serif;
      border: 2px solid #FFFF00;
      background-color: #00FF00;
      border-radius: 10px;
      height: auto;
      width: 180px;
  }
  
  .extrainfo:hover {
      background-color: #4CAF50;
      color: white;
  }
  
  .margin {
      margin-left: 20px;
      margin-right: 20px;
   }
  
  .shading {
      border-radius: 15px;
      width: auto;
      height: auto;
      padding: 10px 25px;
      text-align: left;
      background-color:rgba(0, 0, 0, 0.6)
  }
  </code></pre>