I can't figure out why there is like a padding around my image for my homework.
It should look like this according to the book:
This is what it looks like:
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link rel="stylesheet" href="javajam.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Menu.html">Menu</a><li>
<li><a href="Music.html">Music</a><li>
<li><a href="Jobs.html">Jobs</a><li>
</ul>
</nav>
<main>
<div id="hero">
<h2>Follow the Winding Road to JavaJam</h2>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night Every Friday Night</li>
</ul>
<div>
54321 Route 42<br>
Ellison Bay, WI 54210<br>
1-888-555-5555<br><br>
</div>
</div>
</main>
<footer>
Copyright © 2016 JavaJam Coffee House<br>
<a href="mailto:holly@schilling.com">holly@schilling.com</a>
</footer>
</div>
</body>
</html>
This is my CSS:
body {background-color: #F5F5DC;
background-image: url(images/javabackground.gif);
color: #230000;
font-family: Verdana, Arial, sans-serif;}
header {background-color: #D2B48C;}
nav {font-weight: bold;
text-align: center;
padding: 10px;
float: left;
width: 160px;}
nav a {text-decoration: none;}
nav ul {list-style-type: none;
padding-left: 0;
font-size: 1.2em;}
nav a:link {color: #795240;}
nav a:visited {color: #A58366;}
nav a:hover {color: #F5F5DC;}
main {padding: 20px;
display: block;
background-color: #F5F5DC;
margin-left: 175px;}
main img {float: left;
padding-right: 2em;}
main ul {list-style-image: url(marker.gif);
list-style-position: inside;}
main div {overflow: auto;
font-size: 90%;
padding-left: 5%;
padding-right: 5%;}
h1, h2 {font-family: Georgia, "Times New Roman", serif;}
h1 {background-image: url(images/javalogo.gif);
background-position: center;
background-repeat: no-repeat;
text-indent: -9999px;
height: 100px;
margin: 0;}
h3 {background-color: #E6D6A9;
text-transform: uppercase;}
dt {font-weight: bold;}
footer {background-color: #D2B48C;
color: #000000;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 10px;}
footer a:link {color: #2E0000;}
footer a:visited {color: #000000;}
footer a:hover {color: #F5F5DC;}
#wrapper {background-color: #E2D2B0;
margin-left: auto;
margin-right: auto;
width: 80%;
min-width: 960px;
max-width: 2048px;
box-shadow: 3px 3px 3px #2E0000;}
#hero {height: 300px;
color: #F5F5DC;
background-image: url(images/heroroad.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;}
.news {margin-left: 20%;
margin-right: 20%;}
Validator confirmed that there were no errors, but my image seems to have some sort of padding. What am I doing wrong?