Html 对自行调整大小的div进行故障排除

我目前正在构建一个div网格布局网页。显然，我一直在编辑每个单独的方块，以填补一个角色。然而，出于某种原因，我注意到，尽管我已经将大多数div指定为

200x200px

，还有一对div指定为

200x400px

，但出于某种原因，其中一些div的大小已经额外调整了

10px

，因此正方形开始重叠。我以前没有这个问题，现在有了。谁能帮我解决这个问题？因为我看不出问题所在

问题在于“steps”分区和“special offers”分区的背景尺寸也调整到了原来的一半

以下是HTML：

<div class="col">
    <div class="trigger">
        <div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" height="200" width="200"/><p style="margin: 10px 20px;">Fill out our order form choosing the service you require and your payment details. We will then take a deposit and book you into our diary.<p></div>
    </div>
    <div class="trigger">
        <div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP3.jpg" height="200" width="200"/><p style="margin: 10px 20px;">We will produce the work you require using the project plan. All of our work is produced Within the time limit set and to the highest possible standard.<p></div>
    </div>
</div>
<div class="col">
    <div class="trigger">
        <div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP2.jpg" height="200" width="200"/><p style="margin: 10px 20px;">We will have a face to face meeting to discuss everything that you require and we will put together a project plan.<p></div>
    </div>
    <div class="trigger">
        <div style="display:table-cell; vertical-align:middle; color: white;" tabindex="0" class="maincontent hover-img img4"><img src="STEP4.jpg" height="200" width="200"/><p style="margin: 10px 20px;">A design is not finished until you are entirely happy. When we believe the work is complete we will send you an artwork approval form for you to sign and return.<p></div>
    </div>
</div>

填写我们的订单，选择您需要的服务和付款详细信息。然后我们将收取押金并将您记入我们的日记。
我们将使用项目计划制作您需要的作品。我们所有的工作都是在规定的时限内完成的，并达到了可能的最高标准。
我们将举行一次面对面的会议，讨论您需要的一切，我们将制定一个项目计划。
直到你完全满意，设计才算完成。当我们认为工作完成后，我们将向您发送一份艺术品审批表，供您签字并返回。

如果您对使用填充。触发添加框大小：框边框属性

要获得更详细的帮助，请发布您的css并修复live链接，因为它会将您自己的文件带到本地

应用此css

.trigger {
  width: 200px;
  height: 200px;
  overflow: hidden;
  box-sizing: border-box;
}

---

无法在此访问您的本地电脑，伙计@Eirenaios哈哈哈对不起伙计们！！！现在修好了！这就是为什么我的大脑会因为这个而变得如此油炸！我已经从你的代码块中删除了多余的

。我在这里发布之前已经尝试过了，如果你看一下我更新过的livelink，它显示了发生了什么，它会切断末尾方框的右侧，并扭曲包含iframe的底部div