Div在网站上没有正确对齐（尽管在CodePen中正常工作）

Question

我的网站由绿色框（div）组成，并排排列。 每行有3个div，它们的高度假设是相同的。

除非出于某种原因在页面底部正确对齐3个div 不，否则一切都很完美。

问题只发生在我的网站上，但出于某种原因在CodePen中运行正常。你能找出问题所在吗？

Here is my site（向下滚动查看问题）

以下是codepen（由于某种原因没有问题）

以下是显示我服务器上的问题的屏幕截图：

div的HTML是：

  <a href="http://www.Demo Demo/Land/details_land.html">
     <p class="vignette" style="background-image:url(http://jasoncampbell.net46.net/public/5.jpg)"></p>
    <div> 

      <p class="titlebox">Sample Title Title Title</p>
      <p>Demo Demo</p>
      <p>Demo Demo</p>
    </div>
  </a>

Answer 1

    .mainbox {
  width:80%;
  margin:auto;
  overflow:hidden;
  text-align:center;
  height: 4000px;
}
.mainbox a {
display: inline-block;
vertical-align: top;
margin: 0 0.5em 0;
width: 25%;
background: #A1F997;
box-shadow: 0 50px 0 #A1F997 , 0 100px #A1F997 , 0 150px #A1F997;
border-top: 1em solid white;
padding: 0.5em;
margin-top: 151px;
height: 450px;}

立即尝试

Answer 2

您的网站还有一个比您的Codepen示例更多的框，因此CSS选择器：

.mainbox a:last-of-type:nth-child(4n){
   margin-right:calc(25% + 1.7em);
   box-shadow: 0 50px 0 #A1F997 , 0 100px #A1F997  , 0 150px #A1F997,  100px 0 white,  200px 0 white,  300px 0 white,  400px 0 white
}

正在生效并给最后一个方框一个大的右边距，这会强制它到下一行。