How to fix design

Question

I have problem with the black border which is on left and right of the website, how do I fix it? Which element do I need to change to fix that? Is anything missing there? I copied this from my textbook. But I don't know why its not working. I tried changing css as html was provided by instructor in class. All I can change is css. I think something is wrong with margins or padding. I am not sure where I tried changing almost everything, but nothing worked for me.

 body { background-color: #FCEBB6; 
          background-image: url(background.gif);
          color: #221811;
          font-family: Verdana, Arial, sans-serif;
    	  background-image: url(background.gif);
    }
    #wrapper { background-color: #231814;
               width: 100%;
               margin-right: auto;
    		   margin-left: auto;
               min-width: 900px;
    		   max-width: 1280px;
    		   box-shadow: 3px 3px 3px #666666; 
    }
    header { background-color: #D2B48C;
            height: 150px;
           background-image: url(javajamlogo.jpg);
           background-repeat: no-repeat;
    }
    h1 { padding-top: 45px;
        padding-left: 220px;
    	font-size: 3em; 
    }
    nav { text-align: center; 
         font-weight: bold; 
    	 font-size: 1.5em;
    	 padding-top: 10px;
    	 float: left;
    	 width: 200px;
    }
    nav a { text-decoration: none; }
    footer { background-color: #D2B48C;
           font-size: small;
    	   font-style: italic;
    	   text-align: center;
    	   padding-bottom: 10px;
    	   border-top: 2px #221811 solid;
    }
    main { padding-left: 0;
          padding-right: 0;
    	  padding-bottom: 2em;
    	  padding-top: 0;
          display: block;
          margin-left: 200px;
          background-color: #FEF6C2;	  
    }
    h4 { background-color: #d2B48C;
        font-size: 1.2em;
    	padding-left: 10px;
    	padding-bottom: 5px;
    	text-transform: uppercase;
    	border-bottom: 2px;
    	padding-bottom: 0;
    	clear: left;
    }
    .details { padding-left: 20%;
              padding-right: 20%;
    		  overflow: auto;
    }
    img { padding-left: 10px;
         padding-right: 10px;
    }
    * { box-sizing: border-box;
    }
    #heroroad { background-image: url(heroroad.jpg);
                background-size: 100%;
    			height: 250px;
    }
    #heromugs { background-image: url(heromugs.jpg);
                background-size: 100%;
    			height: 250px;
    }
    #heroguitar { background-image: url(heroguitar.jpg);
                background-size: 100%;
    			height: 250px;
    }
    main h2,h3,h4,p,div,ul,dl { padding-left: 3em;
                                padding-right: 2em;
    }
    a:link { color:#FEF6C2;}
    a:visited { color: #D2B48C;}
    a:hover { color: #CC9933; }
    nav ul { text-decoration: none;
             padding-left: 0;
    }
    .floatleft { float: left;
                 padding-right: 20px;
    			 padding-bottom: 20px;
    }

<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="heroroad"></div>
    <h2>Follow the Winding Road to JavaJam</h2>
    <p>We&#39;re a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You&#39;ll feel right at home at JavaJam!</p>
    <h3>JavaJam Coffee House features:</h3>
    <ul>
      <li>Specialty Coffee and Tea</li>
      <li>Bagels, Muffins, and Organic Snacks</li>
      <li>Music and Poetry Readings</li>
      <li>Open Mic Night</li>
    </ul>
    <div>
    54321 Route 42<br>
    Ellison Bay, WI 54210<br>
    888-555-5555<br><br>
    </div>
    </main>
    <footer>
    Copyright &copy; 2016 JavaJam Coffee House<br>
    <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
    </footer>
    </div>

Answer 1

You have padding left and right on the every div. Change padding left and right 0 px to wrapper.

body { background-color: #FCEBB6; 
      background-image: url(background.gif);
      color: #221811;
      font-family: Verdana, Arial, sans-serif;
      background-image: url(background.gif);
}
#wrapper { background-color: #231814;
           width: 100%;
           margin-right: auto;
           margin-left: auto;
           min-width: 900px;
           max-width: 1280px;
           box-shadow: 3px 3px 3px #666666;
padding-right: 0px;
padding-left: 0px;
}
header { background-color: #D2B48C;
        height: 150px;
       background-image: url(javajamlogo.jpg);
       background-repeat: no-repeat;
}
h1 { padding-top: 45px;
    padding-left: 220px;
    font-size: 3em; 
}
nav { text-align: center; 
     font-weight: bold; 
     font-size: 1.5em;
     padding-top: 10px;
     float: left;
     width: 200px;
}
nav a { text-decoration: none; }
footer { background-color: #D2B48C;
       font-size: small;
       font-style: italic;
       text-align: center;
       padding-bottom: 10px;
       border-top: 2px #221811 solid;
}
main { padding-left: 0;
      padding-right: 0;
      padding-bottom: 2em;
      padding-top: 0;
      display: block;
      margin-left: 200px;
      background-color: #FEF6C2;      
}
h4 { background-color: #d2B48C;
    font-size: 1.2em;
    padding-left: 10px;
    padding-bottom: 5px;
    text-transform: uppercase;
    border-bottom: 2px;
    padding-bottom: 0;
    clear: left;
}
.details { padding-left: 20%;
          padding-right: 20%;
          overflow: auto;
}
img { padding-left: 10px;
     padding-right: 10px;
}
* { box-sizing: border-box;
}
#heroroad { background-image: url(heroroad.jpg);
            background-size: 100%;
            height: 250px;
}
#heromugs { background-image: url(heromugs.jpg);
            background-size: 100%;
            height: 250px;
}
#heroguitar { background-image: url(heroguitar.jpg);
            background-size: 100%;
            height: 250px;
}
main h2,h3,h4,p,div,ul,dl { padding-left: 3em;
                            padding-right: 2em;
}
a:link { color:#FEF6C2;}
a:visited { color: #D2B48C;}
a:hover { color: #CC9933; }
nav ul { text-decoration: none;
         padding-left: 0;
}
.floatleft { float: left;
             padding-right: 20px;
             padding-bottom: 20px;
}

<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="heroroad"></div>
<h2>Follow the Winding Road to JavaJam</h2>
<p>We&#39;re a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You&#39;ll feel right at home at JavaJam!</p>
<h3>JavaJam Coffee House features:</h3>
<ul>
  <li>Specialty Coffee and Tea</li>
  <li>Bagels, Muffins, and Organic Snacks</li>
  <li>Music and Poetry Readings</li>
  <li>Open Mic Night</li>
</ul>
<div>
54321 Route 42<br>
Ellison Bay, WI 54210<br>
888-555-5555<br><br>
</div>
</main>
<footer>
Copyright &copy; 2016 JavaJam Coffee House<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>

Answer 2

Give your #wrapper padding:0

body { background-color: #FCEBB6; 
      background-image: url(background.gif);
      color: #221811;
      font-family: Verdana, Arial, sans-serif;
      background-image: url(background.gif);
}
#wrapper { background-color: #231814;
           width: 100%;
           margin-right: auto;
           margin-left: auto;
           min-width: 900px;
           max-width: 1280px;
           box-shadow: 3px 3px 3px #666666; 
           padding:0;
}
header { background-color: #D2B48C;
        height: 150px;
       background-image: url(javajamlogo.jpg);
       background-repeat: no-repeat;
}
h1 { padding-top: 45px;
    padding-left: 220px;
    font-size: 3em; 
}
nav { text-align: center; 
     font-weight: bold; 
     font-size: 1.5em;
     padding-top: 10px;
     float: left;
     width: 200px;
}
nav a { text-decoration: none; }
footer { background-color: #D2B48C;
       font-size: small;
       font-style: italic;
       text-align: center;
       padding-bottom: 10px;
       border-top: 2px #221811 solid;
}
main { padding-left: 0;
      padding-right: 0;
      padding-bottom: 2em;
      padding-top: 0;
      display: block;
      margin-left: 200px;
      background-color: #FEF6C2;      
}
h4 { background-color: #d2B48C;
    font-size: 1.2em;
    padding-left: 10px;
    padding-bottom: 5px;
    text-transform: uppercase;
    border-bottom: 2px;
    padding-bottom: 0;
    clear: left;
}
.details { padding-left: 20%;
          padding-right: 20%;
          overflow: auto;
}
img { padding-left: 10px;
     padding-right: 10px;
}
* { box-sizing: border-box;
}
#heroroad { background-image: url(heroroad.jpg);
            background-size: 100%;
            height: 250px;
}
#heromugs { background-image: url(heromugs.jpg);
            background-size: 100%;
            height: 250px;
}
#heroguitar { background-image: url(heroguitar.jpg);
            background-size: 100%;
            height: 250px;
}
main h2,h3,h4,p,div,ul,dl { padding-left: 3em;
                            padding-right: 2em;
}
a:link { color:#FEF6C2;}
a:visited { color: #D2B48C;}
a:hover { color: #CC9933; }
nav ul { text-decoration: none;
         padding-left: 0;
}
.floatleft { float: left;
             padding-right: 20px;
             padding-bottom: 20px;
}

<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="heroroad"></div>
<h2>Follow the Winding Road to JavaJam</h2>
<p>We&#39;re a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You&#39;ll feel right at home at JavaJam!</p>
<h3>JavaJam Coffee House features:</h3>
<ul>
  <li>Specialty Coffee and Tea</li>
  <li>Bagels, Muffins, and Organic Snacks</li>
  <li>Music and Poetry Readings</li>
  <li>Open Mic Night</li>
</ul>
<div>
54321 Route 42<br>
Ellison Bay, WI 54210<br>
888-555-5555<br><br>
</div>
</main>
<footer>
Copyright &copy; 2016 JavaJam Coffee House<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>