title: Why is this DIV duplicating?
body: <p>I am having trouble getting this banner image underneath my nab bar to fit right and also to respond to screen width. It seems the div i am using to set the banner background image is duplicated or something here is a screen shot...</p>
  
  <p><a href="http://i.imgur.com/4WzbPjn.png" rel="nofollow">Duplicate DIV pic</a></p>
  
  <p>This is the same image twice.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;Vector Games&lt;/title&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;link rel="shortcut icon" href="favicon.png" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="homecss.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;head&gt;
      &lt;style&gt;
  body{
   margin: 0;
   padding: 0;
   font-family: sans-serif;
  }
  header{
   background-image: url('cubes.png');
   width: 100%;
   padding: 15px 0;
   color: #49ac6f;
   text-align: center;
   font-size: 20px;
  }
  a{
   text-decoration: none;
   color: inherit;
  }
  nav ul{
   background-color: #a2a2a2;
   overflow: hidden;
   color: white;
   padding: 0;
   text-align: center;
   margin: 0;
   -webkit-transition: max-height .4s;
   -ms-transition: max-height .4s;
   -moz-transition: max-height .4s;
   -o-transition: max-height .4s;
   transition: max-height .4s;
  }
  nav ul li:hover{
   background-color: #49ac6f;
  }
  nav ul li{
   display: inline-block;
   padding: 20px;
  }
  .handle{
   width: 100%;
   font-size: 24px;
   background: #a2a2a2;
   text-align: right;
   box-sizing: border-box;
   padding: 15px 10px;
   cursor: pointer;
   display: none;
  }
  @media screen and (max-width: 650px){
   nav ul{
    max-height: 0;
   }
   .showing{
    max-height: 21em;
   }
   nav ul li{
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    text-align: left;
   }
   .handle{
    display: block;
   }
  }
  .banner{
   width: 100%;
   margin: 0 auto;
   padding-top: 1000px;
   background-image: url('banner1.png');
  }
      &lt;/style&gt;
      &lt;body&gt;
  
      
      
   &lt;header&gt;
          &lt;h1&gt;Vector Games&lt;/h1&gt;
          &lt;img src="logo.png" alt="logo"/&gt;
      &lt;/header&gt;
      
   &lt;nav&gt;
       &lt;ul&gt;
           &lt;a href="#"&gt;&lt;li&gt;Home&lt;/li&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;li&gt;About&lt;/li&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;li&gt;Racing&lt;/li&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;li&gt;Arcade&lt;/li&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;li&gt;Strategy&lt;/li&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;li&gt;Puzzle&lt;/li&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;li&gt;Sport&lt;/li&gt;&lt;/a&gt;
          &lt;/ul&gt;
          &lt;div class="handle"&gt;
          &amp;#9776;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="banner"&gt;
          
      &lt;/div&gt;
      &lt;script&gt;
          $('.handle').on('click', function(){
              $('nav ul').toggleClass('showing');
          });
      &lt;/script&gt;
  
      &lt;div class="banner"&gt;
          
      &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Oh and also how would I be able to make the image underneath my nab bar responsive like i need it scalable like the navbar. Do i need to setup media queries? </p>
  
  <p>thanks,
  Trace</p>