Почему появляется горизонтальная полоса прокрутки, если ни один из элементов не шире контейнера 960px?

Все обернуто в div с помощью id="main_wrap"

основной обертку имеет этот стиль:

#main_wrap{
  margin:0 auto;
  width:960px;
  position:relative;
}

Так как все обернуто внутри этого div, я не понимаю, почему горизонтальная полоса прокрутки появится внизу.

Ответ 1

Попробуйте добавить переполнение скрыто:

#main_wrap{
    margin:0 auto;
    width:960px;
    position:relative;
    overflow: hidden;
}

Это должно работать (но хаки).

Ответ 2

Если у любого из дочерних элементов есть границы, к ним применяется отступ (или иногда поля), что увеличивает ширину и высоту. Использование overflow: hidden; будет избегать полос прокрутки. Но если что-то имеет слишком большую ширину, вы, вероятно, захотите выяснить, откуда оно исходит, чтобы избежать возможных проблем в будущем.

Обратите внимание, что вы можете использовать box-sizing: border-box чтобы границы и отступы не добавляли дополнительную ширину (или высоту). Это особенно полезно, когда вы используете что-то вроде width: 100%, но width: 100% также не требуется в большинстве случаев - элементы с display: block примененный display: block по умолчанию заполнит ширину И сохранит отступы и границы от добавления дополнительной ширины,

Например:

html, body { margin: 0; padding: 0; }

div {
  background: #111;
  color: #eee;
  padding: 1em; /* This doesn't add to width - still at 100% width */
  border: 2px solid #5e5;  /* This also doesn't add to width - still at 100% width */
}

<div>Test</div>

Ответ 3

Если элементы бок о бок и имеют комбинированную ширину, или, поскольку BDawg говорит о полях или прокладках, которые вызывают превышение 960 пикселей, может появиться полоса прокрутки. Опубликуйте весь свой код, и мы сможем понять его очень быстро. Скрытие переполнения должно работать, но на самом деле это не объясняет, почему появляется полоса прокрутки. Предоставление нам всей вашей разметки поможет найти корень проблемы.

Ответ 4

Где-то вы оставили невидимые элементы DOM, которые занимают дополнительную ширину. лучше найти и исправить детей, чем использовать overflow:hidden. переполнение: скрытые скрывают полосу прокрутки, если пользователь увеличивает масштаб страницы.

Ответ 5

Если вы измените ширину на 100%, это поможет вам, но если вы не хотите,
просто попробуйте добавить внешний <div style="width:100%"></div>
как это:

    <div style="width:100%">
       <div class="main_wrap">
          %your content%
       </div>
    </div>