I was expecting to see a centered div(wrapper) with a width of 940px and a black background-color when I previewed my page, but for some reason, there is no evidence of this wrapper even though there are no obvious errors in my HTML or CSS. My CSS is properly connected to my HTML file and all other elements can be formatted except for the wrapper. Why is this happening?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<link href="css/styles.css" type="text/css"
rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>
Exotic Honey
</h1>
</header>
<main>
<form action="http://compass.northseattle.edu/~aali/it111/form/formhandler.php" method="post">
<fieldset>
<legend>Place Order</legend>
<label>Name</label><input type="text" name="name">
<label>Email</label><input type="email" name="email">
<label>Payment</label>
<ul>
<li><input type="radio" name="payment" value="mastercard">MasterCard</li>
<li><input type="radio" name="payment" value="visa">Visa</li>
<li><input type="radio" name="payment" value="americanexperess">AmericanExpress</li>
</ul>
<label>Honeys</label>
<ul>
<li><input type="checkbox" name="honey" value="pitcairn">Pitcairn</li>
<li><input type="checkbox" name="honey" value="sage">Sage</li>
<li><input type="checkbox" name="honey" value="lavendar">Lavendar</li>
</ul>
<label>Continents</label>
<select name="regions">
<option value="na">North America</option>
<option value="sa">South America</option>
<option value="eu">Europe</option>
<option value="as">Asia</option>
<option value="af">Africa</option>
<option value="oc">Oceania</option>
</select>
<input type="submit" value="submit">
</fieldset>
</form>
</main>
<aside>
<figure>
<img class="right" src="images/honeypic.jpg" alt="honey jar">
<figcaption>Rare exotic honey</figcaption>
</figure>
</aside>
<footer>
<ul>
<li>Copyright ©</li>
<li><a href="">Terms of use</a></li>
<li><a href="http://compass.northseattle.edu/~aali/it111/index.html">Web design by Alas</a></li>
</ul>
</footer>
</div>
</body>
</html>
Here's my CSS
<style>
div#wrapper{
width:940px;
margin:20px auto;
background: black;
}
header{
color:goldenrod;
height:auto;
background-color:purple;
margin:20px auto;
text-align:center;
font-style:italic;
}
footer{
color:goldenrod;
height:auto;
background-color:darkred;
clear:both;
}
footer ul{
list-style-type: none;
margin-left:20px;
}
footer li{
float:left;
margin-right:30px;
}
main{
background-color:beige;
float:left;
width: 500px;
}
aside{
width:250px;
float:right;
margin-right:30px;
padding-right:30px;
background-color:darkgray;
}
label{
display:block;
}
input[type=submit]{
width:auto;
}
input[type=radio]
input[type=checkbox]{
width:auto;
height:auto;
margin-right:5px;
margin-left:5px;
}
form li{
list-style-type: none;
margin-left:auto;
}
legend{
font-size:1.3em;
font-style:italic;
}
.right{
width:250px;
height:250px;
padding-right:30px;
margin-right:30px;
}
</style>
Here's the preview