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

debugcn Published at Dev

Nova

My site consists of green boxes (divs) that are aligned side-by-side in rows. There are 3 divs per row, and their heights are suppose to be the same.

Everything works perfectly except for some reason there are 3 divs not aligning properly at the bottom of the page.

The problem only occurs on my website though, but works fine in a CodePen for some reason. Can you pinpoint the problem?

Here is my site (scroll down to see problem)

Here is the codepen (no issue for some reason)

and here is a screenshot showing the issue on my server:

enter image description here

The div's HTML is:

  <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>

OtherClare

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

try it now

Collected from the Internet

Please contact [email protected] to delete if infringement.