Html 仅在特定媒体查询中发出保证金

我遇到了一个奇怪的问题，在

@媒体屏幕和（最小宽度：640px）和（最大宽度：840px）

的媒体查询范围内，我的整个页面都被甩了。出于某种原因，看起来我将

左边距

应用于我拥有的第一个盒子容器，但在我的代码中没有

左边距

集。我试图将div

bluebox容器的开头应用到它上面的兄弟容器之后，以消除空白，但这没有帮助

有人知道为什么我会在我的第一个蓝色盒子的左边留下空白吗

如果有人需要现场观看，我可以在我的评论中添加该网站。如果需要，请评论


HTML-我只应用了两个块来演示一般顺序，而不是为所有块附加所有的内容

<div class="blue-box-container">
  <div class="dark-blue-box">
    <div class="insideBoxWrap">
        <div class="home-icon"><img src="/icons/screen6.png" alt=""></div>
        <div class="box-title">Brand Strategy</div>
        <div class="box-description">Digital Roadmap</div>
        <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
        fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div><div class="light-blue-box">
    <div class="insideBoxWrap">
        <div class="home-icon"><img src="/icons/web2.png" alt=""></div>
        <div class="box-title">Development</div>
        <div class="box-description">That Outperforms</div>
        <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
        fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div>
 </div>


品牌战略
数字路线图
悬停视图fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfdsf fdsfs
fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfdsf fdsfs
发展
这比
悬停视图fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfdsf fdsfs
fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfdsf fdsfs
您可以在该框上添加负值以消除空白

.insideBoxWrap {
    position: relative;
    left: -10px;
}

可以在该框上添加负值以消除空白

.insideBoxWrap {
    position: relative;
    left: -10px;
}

我想

.insideBoxWrap {
    padding: 10% 30px;
}

是造成空白问题的原因。您在左侧和右侧添加了30px的填充，因此
中的所有元素都将向右移动30px。由于内包装纸上没有背景色，所以出现了空白。
我想

.insideBoxWrap {
    padding: 10% 30px;
}

是造成空白问题的原因。您在左侧和右侧添加了30px的填充，因此
中的所有元素都将向右移动30px。由于insideBoxWrap上没有背景色，因此出现了空白。
有多种可能的解决方案，我建议在框中添加
float
：

.dark-blue-box, .light-blue-box {
    height: 33%;
    width: 50%;
    display: inline-block;
    float: left;
}

它解决了您的问题。
可能有多种解决方案，我建议在框中添加
float
：

.dark-blue-box, .light-blue-box {
    height: 33%;
    width: 50%;
    display: inline-block;
    float: left;
}

它解决了你的问题。
我想看看网站我想看看网站，它会让我所有的
蓝盒容器
向左移动。那会让我所有的
蓝盒容器
向左移动。这对我来说是成功的。谢谢这是为了我。谢谢