title: Header wider than page
body: <p>I have set my header and footer width to 100% but somehow header is wider than page making a scroll bar appear at bottom, content and footer match page width, only header is wider maybe because i have used media query for drop down menu inside header. My code is</p>
  
  <pre><code>* {
   margin: 0px;
   padding: 0px;
   font-family: Arial, Helvetica, Sans-serif;
   font-size: 12px;
   background-color: #EDEDED;
   }
  
  .headerMenu{
   width: 100%;
   padding: 30px;
   background-color:#BF3B3D;
   }
   #wrapper {
   width:100%;
   background-color:#BF3B3D;
   }
  
   .logo img {
    position: absolute;
    top:0;
    float:left;
    background-image: url(../img/menu_bg.gif);
    width: 110px;
    height: 58px;
    }
   .search_box {
    top: 7px;
    float:left;
    color: #198C9E;
    background-color:#BF3B3D;
    position: absolute;
    margin-left: 155px;
    } 
  
   @media screen and (max-width: 1280px) {
   .dd {
     background-color:#BF3B3D;
     position: absolute;
     right:0px;
     top:0;
     margin-right: 4%;
     }  
     }
  
    @media screen and (min-width: 1280px) {
    .dd {
      background-color:#BF3B3D;
      position: absolute;
      right:0px;
      top:0;
      margin-right: 10%;
      }  
      }
      @media screen and (min-width: 1920px) {
      .dd {
         background-color:#BF3B3D;
         position: absolute;
         right:0px;
         top:0;
         margin-right: 25%;
         }
         }
  </code></pre>
  
  <p>Here dd is class for drop down menu.</p>