When I zoom in, I notice two buttons - one on the left and one on the right. The larger button behind the main one changes color when hovered over but does not direct me to where I want to go. It seems like it's related to the width setting of 180px with auto height. I want this mysterious appearing button to disappear.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="setupstylesheet.css">
<title>Setting up Your Website Folders</title>
</head>
<body>
<div id="body">
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div class="margin">
<div class="shading">
<h1>2. Setting Up Your Website Folders</h1>
<p>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:</p>
<ol>
<li> Create a folder on your hard drive or a USB called "Website".</li>
<li>Open a blank Notepad++ document.</li>
<li>Save the blank document in your "Website" folder with the name "Index", and a file extension of ".html".</li>
<li>Open another blank Notepad++ document and call it "StyleSheet" with the file extension of ".css". Save it in your "Website: folder as well.</li>
<li>Inside your "Website" folder, create another folder called "Images".</li>
<li>If you wish to include music on your website, create another folder in your "Website" folder called "Audio".</li>
</ol>
<p>Your website folder should now look something like this:</p>
<img src="Images/webfolderdemo.jpg" width="80%" height="80%">
<p>Remember whenever you add pictures, put them in the "Images" folder, and music or other audio, put in the "Audio" folder."
<div class="needs">
<a href="index.html">
<button type="button" class="needs">1. Things you need</button>
</a>
</div>
<div class="extrainfo">
<a href="extrainfo.html">
<button type="button" class="extrainfo">3. Extra Information</button>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
#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)
}