Troubleshooting divs that have resized on their own

Question

I am currently building a div grid layout web page. Obviously I have been editing each individual square to fill a role. However for some reason I have noticed that although I have specified most of the divs as being 200x200px and a couple being 200x400px for some reason some of them have resized by an extra 10px so the squares are starting to overlap. I did not have this problem before yet I do now. Could somebody please troubleshoot this? As I can not see the problem.

The issue is with the 'steps' divs and the 'special offers' div where the background has also resized to half the size. Here is a livelink to the page in question, please look at the source code. I shall remove this when the question is answered for future posterity of the post.

Here is the 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>

Answer 1

apply this css

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