Заголовок сайта не растягивается на 100% при изменении размера окна

Question

Так что мой сайт http://dealminion.com имеет заголовок, который установлен на 100%.Однако, если я изменю размер окна браузера, прокрутка вправо останавливает заголовок, но страница продолжает работать.Это очень странно.Если вы зайдете на сайт и измените размер окна, вы увидите, что я говорю.Вот css:

#header-intro { 
width: 100%; 
position: absolute; 
height: 600px; 
padding-top: 25px;
background-color: #657b90;
border-bottom: 1px solid #000000;
-moz-box-shadow: 0 5px 2px -2px #777777;
-webkit-box-shadow: 0 5px 2px -2px #777777;
box-shadow: 0 5px 2px -2px #777777;
behavior: url('pie.htc');
}

и тело css:

html, body { 
margin: 0; 
padding: 0; 
height: 100%;
width: 100%;
background: #f8f8f8;
}

Есть ли причина, по которой это происходит?

Answer 1

, если в вашем #info нет элемента, попробуйте:

#info {
    position: absolute;
    z-index: 999;
    background: #314455;
    overflow:hidden;
    width: 100%;
}
#info a{
    display:block;
    padding:10px;
}

Answer 2

Он растягивается, чтобы содержать ваш #info элемент, который имеет width: 100% и padding: 10px, эффективно вызывая 20px переполненного содержимого.

Поскольку #info является элементом уровня блока, вам не нужно устанавливать ширину на 100%. Просто установите width: auto (или не устанавливайте его вообще), и он заполнит доступное пространство, сделав поправки на отступы, границы и поля, не вызывая переполнения.

#info {
    position: absolute;
    z-index: 999;
    background: #314455;
    padding: 10px;
    height: auto;
    width: auto; /* changed to auto */
}

UPDATE:

Я лучше понимаю, чего вы пытаетесь достичь.

Поскольку он абсолютно позиционирован, ширина уменьшается. Вместо явного задания ширины для этого элемента, неявно задайте его с помощью left и right.

#info {
    position: absolute;
    z-index: 999;
    background: #314455;
    padding: 10px;
    height: auto;
    left: 0;
    right: 0;
}