Что именно заставляет ширину быть больше, чем она должна быть на моей веб-странице?

Question

Я действительно не уверен, что здесь происходит. Я прокомментировал области кода, которые, как я подозревал, это было бы, убедился, что это не сбой, есть кое-что, что я, очевидно, не вижу здесь. Надеюсь, один из вас веб-дизайн эксперты могут мне помочь.

* { 
    margin: 0; 
    padding: 0; 
    font-family: "Montserrat"; 
} 

Я попытался установить переполнение-х, чтобы скрытое, который фиксирует это, проблема в том, что, когда я делаю что переполнение-у, кажется, автоматически устанавливаются на авто вместо видимого и не меняется, когда я установите его вручную на видимое.

http://jsfiddle.net/jg10vzcx/

Answer 1

Виновником является .sub-text элементом. Это элемент абзаца уровня блока с шириной по умолчанию 100%. Вы позиционируете его с помощью left: calc(50% - 15vw), чтобы центрировать его. При этом он проходит мимо окна просмотра (потому что он имеет ширину 100%), и он создает горизонтальную полосу прокрутки.

Вы можете удалить позицию left и просто добавить text-align: center к элементу, чтобы центрировать его.

Updated Example

.sub-text { 
    position: relative; 
    margin-top: 2vh; 
    /* left: calc(50% - 15vw); */ 
    font-size: 2vw; 
    text-transform: uppercase; 
    text-shadow: 0 0 1vw black; 
    text-align: center; 
}