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

Question

我的网站由并排排列的绿色方框（divs）组成。每行有3个div，它们的高度应该是一样的。

一切正常，除了某些原因，页面底部有 3 个 divnot 正确对齐。

虽然这个问题只出现在我的网站上，但由于某种原因在 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

您的网站比您的 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
}

正在生效并为最后一个框提供较大的右边距，迫使它到下一行。

Answer 2

    .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;}

立即尝试

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

Divs not aligning properly on website (work fine in CodePen though)

html

css

alignment