Заголовок более широкий, чем страница

Question

Я установил ширину заголовка и нижнего колонтитула до 100%, но как-то заголовок шире, чем страница, создающая полосу прокрутки внизу, ширину страницы содержимого и нижнего колонтитула, только заголовок шире, возможно, потому, что я использовал носитель запрос для выпадающего меню внутри заголовка. Мой код:

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

Здесь dd является классом для выпадающего меню.

Answer 1

Это потому, что вы применяете padding к своему заголовку.

Чтобы изменить это поведение, используйте свойство box-sizing.

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