为什么我的网页宽度超过了设备宽度

Question

我正在尝试构建一个网页，由于某种原因，当我测试页面的响应能力时，页面的宽度超出了设备的宽度。

我尝试删除代码的各个部分，唯一使网页恢复正常宽度的方法是删除“简介”div，因为我发现这是检查中的问题。我的代码有什么问题吗？

这是我关于介绍div的html和css：

html:

`<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="/img/women-in-tech.png" alt="Women In IT">
        </div>
    </div>
</div>`

CSS： `.introduction { 位置：相对； }

.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 with to 70%**/
@media screen and (max-width: 1150px) {
.col img {
  height:70%; 
}
}

.gap {
  height:100px;
}

`

Answer 1

您遇到的问题可能是由于 .col img CSS 规则中的 margin-left 属性造成的。当屏幕尺寸缩小时，margin-left：7vw；导致图像超出视口宽度。

要解决此问题，您可以调整媒体查询内的 margin-left 属性，以在屏幕尺寸较小时减少边距：