CODEWITHSUNDEEP
htmlcssheader
user5311126
user5311126

Reputation:

Header wider than page

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

* {
 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%;
       }
       }

Here dd is class for drop down menu.

Upvotes: 3

Views: 4048

Answers (1)

Lyes BEN
Lyes BEN

Reputation: 1010

That's because you are applying a padding to your header.

To change that behavior, use the box-sizing property.

.headerMenu{
  background-color:#BF3B3D;
  box-sizing: border-box;
  padding: 30px;
  width: 100%;
}

Upvotes: 5

Related Questions