Единица 100vw означает «ширина всего окна просмотра», включая полосу прокрутки — если на странице есть вертикальный скроллбар, реальная видимая ширина контента меньше, чем 100vw, и элемент с такой шириной выходит за пределы экрана, создавая горизонтальную прокрутку.
Почему это неочевидно на первый взгляд
Полоса прокрутки обычно занимает от 15 до 17 пикселей в десктопных браузерах — элемент шириной ровно 100vw физически на эти несколько пикселей шире видимой области контента, что и создаёт нежелательную горизонтальную прокрутку всей страницы.
Решение — используйте 100% вместо 100vw там, где возможно
Для элементов, которые должны занимать полную ширину родительского контейнера, свойство width: 100% не учитывает полосу прокрутки и не создаёт эту проблему, в отличие от 100vw.
Если 100vw действительно нужен для конкретного эффекта
Для случаев, где именно ширина окна просмотра важна (например, для вырывания элемента за пределы обычного контейнера), можно дополнительно скрыть горизонтальную прокрутку на уровне body через overflow-x: hidden — но стоит применять это осознанно, а не как универсальное решение всех похожих проблем.
