title: Making a website for class, a background image is higher than what I need?
body: <p>In my CSS, the redbar.png image is going higher than it needs to be (located in #container). It's going over my horizontal nav and shouldn't be and I'm bot entirely sure how to get it to go away.. Any tips would be greatly appreciated!</p>
  
  <p>Here is the website with the issue : <a href="http://cit.macc.edu/~nduncan/tut4/case2/redball.htm" rel="nofollow">http://cit.macc.edu/~nduncan/tut4/case2/redball.htm</a></p>
  
  <p>Here is my HTML code. </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
  
      &lt;head&gt;
  
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;Red Ball Pizza&lt;/title&gt;
      &lt;script src="modernizr-1.5.js"&gt;&lt;/script&gt;
    &lt;link href="pizza.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;div id="container"&gt;
       &lt;header&gt;&lt;img src="rblogo.png" alt="Red Ball Pizza" /&gt;&lt;/header&gt;
  
       &lt;nav class="horizontal"&gt;
          &lt;ul&gt;
             &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Locations&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Catering&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
       &lt;/nav&gt;
  
       &lt;nav class="vertical"&gt;
          &lt;ul&gt;
             &lt;li&gt;&lt;a href="#"&gt;Pizza&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Salad&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Pasta&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Sandwiches&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Appetizers&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Pocket Pizzas&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Fish &amp;amp; Shrimp&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Chicken &amp;amp; Wings&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Beverages&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Dessert&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Catering&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Download Menu&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Catering Menu&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
  
        &lt;section id="main"&gt;
          &lt;img src="toppings.png" alt="" /&gt;
          &lt;p&gt;At Red Ball Pizza, we want to satisfy every appetite. That's 
             why our menu contains a variety of different items. With 
             so many choices, everyone's favorites are available!
          &lt;/p&gt;
          &lt;p&gt;
             Red Ball Pizza is NOT a franchise, a chain, or a corporation. 
             It is 100% locally owned and operated. Red Ball Pizza is 
             devoted to providing the highest quality and the best service 
             possible. Our only goal is to provide you with a great 
             pizza &amp;#8230; EVERY TIME!
          &lt;/p&gt;
  
          &lt;div class="coupon"&gt;
             &lt;h1&gt;Classic Combo&lt;/h1&gt;
             &lt;p&gt;16" 1-Topping Pizza
                &amp;amp; a 2-Liter of Your Choice
                For Only $14.99
             &lt;/p&gt;
             &lt;p&gt;Expires 3/14&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="coupon"&gt;
             &lt;h1&gt;Pizza &amp;amp; Stix&lt;/h1&gt;
             &lt;p&gt;16" Specialty Pizza
                Reg. Cheese Stix &amp;amp; a 2-Liter
                For Only $21.99
             &lt;/p&gt;
             &lt;p&gt;Expires 3/14&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="coupon"&gt;
             &lt;h1&gt;1/2 Price&lt;/h1&gt;
             &lt;p&gt;Buy any 16" Specialty Pizza
                at Reg. Price &amp;amp; Get a 2nd
                Pizza For Half Price
             &lt;/p&gt;
             &lt;p&gt;Expires 3/14&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="coupon"&gt;
             &lt;h1&gt;Pizza &amp;amp; Wings&lt;/h1&gt;
             &lt;p&gt;14" 2-Topping Pizza 
                &amp;amp; 12 Wings
                For Only $15.99
             &lt;/p&gt;
             &lt;p&gt;Expires 3/31&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="coupon"&gt;
             &lt;h1&gt;$3.00 Off&lt;/h1&gt;
             &lt;p&gt;Get $3.00 Off
                any 16" Pizza at
                Menu Price
             &lt;/p&gt;
             &lt;p&gt;Expires 3/31&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="coupon"&gt;
             &lt;h1&gt;Sub Dinner&lt;/h1&gt;
             &lt;p&gt;1 Toasted Sub &amp;amp; Chips
                &amp;amp; 1 20oz Soda
                For Only $6.99
             &lt;/p&gt;
             &lt;p&gt;Expires 3/31&lt;/p&gt;
          &lt;/div&gt;
       &lt;/section&gt;
  
       &lt;aside&gt;
          &lt;h1&gt;Pizza Pizzazz&lt;/h1&gt;
          &lt;ul&gt;
             &lt;li&gt;93% of Americans eat pizza at least once a month.&lt;/li&gt;
             &lt;li&gt;Mozzarella was originally made from the milk of Indian 
                 water buffalo in the 7th century.&lt;/li&gt;
             &lt;li&gt;75 acres of cheese is eaten every day.&lt;/li&gt;
             &lt;li&gt;23 pounds of cheese is eaten every year by the average 
                 person.&lt;/li&gt;
             &lt;li&gt;The tomato was brought back to Italy by Spaniards returning 
                 from Mexico in the 16th century.&lt;/li&gt;
             &lt;li&gt;The busiest night for take-out pizza orders is Halloween.&lt;/li&gt;
              &lt;li&gt;The first pizzeria opened in 1830 in Naples, Italy. &lt;/li&gt;
          &lt;/ul&gt;
       &lt;/aside&gt;
  
       &lt;footer&gt;
          &lt;address&gt;
             Red Ball Pizza &amp;bull;
             811 Beach Drive &amp;bull;
             Ormond Beach, FL  32175 &amp;bull;
             (386) 555 - 7499 
          &lt;/address&gt;
       &lt;/footer&gt;
  
       &lt;/div&gt;
  
       &lt;/body&gt;
  
       &lt;/html&gt;
  </code></pre>
  
  <p>And here is my CSS. Problem lies in #container. </p>
  
  <pre><code>    header, section, aside, footer, nav {
      display: block;
  
      }
  
  
      /* body styles */
  
      body {
      background-color: red;
      font-family: Verdana, Geneva, sans-serif;
      padding: 0px;
      margin: 0px;
      }
  
  
      #container {
      width: 1000px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: auto;
      margin-right: auto;
      border-left: 1px solid black;
      border-right: 1px solid black;
      background: white url(redbar.png) top left repeat-y;
      }
  
      #container header {
      background-color: white;
      height: 100px;
      }
  
      #container  nav.horizontal {
      height: 70px;
      width: 100%;
      background-color: white;
      }
  
      #container  nav.horizontal ul li{
      background-color: white;
      font-size: 16px;
      height: 50px;
      line-height: 50px;
      width: 180px;
      display: block;
      float: left;
      margin-left: 5px;
      margin-right: 5px;
      text-align: center;
      }
  
      #container  nav.horizontal ul li a{
      display: block;
      background-color: red;
      color: white;
      text-decoration: none;
      border-radius: 30px / 25px; 
      }
  
      #container  nav.horizontal ul li a:hover {
      background-color: rgb(255,101,101);
      color: black;
      }
  
      #container nav.vertical {
      float: left;
      clear: left;
      width: 200px;
      }
  
      #container nav.vertical ul li {
      list-style-type: none;
      text-indent: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
      }
  
      #container nav.vertical ul li a {
      color: white;
      text-decoration: none;
      }
  
      #container nav.vertical ul li a:hover {
      color: black;
      }
  
      #main {
      background-color: rgb(255,211,211);
      float: left;
      width: 600px;
      }
  
      #main p {
      font-size: 20px;
      margin: 15px;
      }
  
      #main img{
      float: right;
      margin: 15px;
      width: 350px;
      border-bottom-left-radius: 350px;
      }
  
      #main div.coupon {
      border: 5px dashed black;
      float: left;
      width: 170px;
      height: 150px;
       margin-top: 20px;
       margin-bottom: 20px;
       margin-left: 10px;
       margin-right: 10px;
       background-image: url(slice.png), url(notice.png);
       background-position: center, bottom right;
       background-repeat: no-repeat;
       background-color: white;
       }
  
      #main div.coupon h1 {
      color: white;
      background-color: rgb(192,0,0); 
      font-size: 16px;
      letter-spacing: 2px;
      text-align: center;
      height: 25px;
      font-variant: small-caps;
      }
  
      #main div.coupon p{
      font-size: 14px;
      text-align: center;
      margin: 5px;
      }
  
      aside {
      float: left;
      width: 200px;
      }
  
      aside h1 {
      color: rgb(192,0,0);
      font-size: 20px;
      letter-spacing: 2px;
      font-weight: normal;
      text-align: center;
      }
  
      aside ul li {
      background-color: rgb(255,135,135);
      border-radius: 5px;
      color: black; 
      list-style-type: none;
      margin: 10px;
      padding: 5px;
      }
  
      footer {
      margin-left: 200px;
      clear: left;
       }
  
      footer address {
      border-top: 1px solid red;
      color: red;
      font-size: 10px;
      font-style: normal;
      text-align: center;
      margin-top: 25px;
      padding-bottom: 20px;
      }
  </code></pre>