Why is the width of my webpage exceeding the device width

Question

I'm encountering an issue with building a responsive webpage. When testing the page's responsiveness, the width extends beyond the device's width for some reason.

I've tried removing various parts of the code, and I've found that the "introduction" div seems to be causing the problem. When I remove it, the webpage returns to the normal width. Can anyone help me identify what's wrong with my code?

Here's the relevant HTML and CSS for the introduction 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;
}

<div class="introduction row align-items-start">
    <div class="gap row">
        <!-- Gap in between a ID and text and image -->
    </div>
    <div class="row">   
        <div class="intro-text col">
            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.
        </div>
        <div class="col">
            <img src="https://mrwallpaper.com/images/hd/advanced-information-technology-engineering-system-degars3km1qclrsn.jpg" alt="Women In IT">
        </div>
    </div>
</div>

Answer 1

The issue you're experiencing might be due to the margin-left property in your .col img CSS rule. When the screen size is reduced, the margin-left: 7vw; causes the image to extend beyond the viewport width.

To fix this, you can adjust the margin-left property inside the media query to reduce the margin when the screen size is smaller: