Почему ширина моей веб-страницы превышает ширину устройства ⇐ CSS

[Anonymous]

У меня возникла проблема при создании адаптивной веб-страницы. При тестировании отзывчивости страницы ширина по какой-то причине выходит за пределы ширины устройства.
Я пробовал удалить различные части кода и обнаружил, что элемент div "введение" похоже, является причиной проблемы. Когда я удаляю его, веб-страница возвращается к нормальной ширине. Может ли кто-нибудь помочь мне определить, что не так с моим кодом?
Вот соответствующие HTML и CSS для вводного div: -

Код: Выделить всё

.introduction {
position: relative;
background: grey;
}

.intro-text {
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings: "wdth" 100;
font-size: 2.5vw;
color: white;
margin-left: 3vw;
}

.col img {
margin-top: 1.5vw;
max-width: 100%;
height: auto;
margin-left: 7vw;
}

/* When width of device is less than 1150px, change the image height and width to 70% */
@media screen and (max-width: 1150px) {
.col img {
height: 70%;
}
}

.gap {
height: 100px;
}

Код: Выделить всё

Over the past few years, information technology has exploded, becoming a major force driving innovation and change. But here's the thing: even though women and folks of color have been rocking it in IT, there's still a big lack of diversity in many areas.

[img]https://mrwallpaper.com/images/hd/advanced-information-technology-engineering-system-degars3km1qclrsn.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/782 ... vice-width