Why does this div shift down when content is added?

Question

I have a 5x5 grid and when i add content to the div, it is shifted down. Can anyone explain why this is happening?

Answer 1

If you set:

.r5, .r4, .r3, .r2, .r1 {
  margin-left: 40px;
  > div {
    display: inline-block;
    vertical-align: top; <-- this
    width: 50px;
    height: 50px;
    border: 1px solid black;
    line-height: 50px;
    text-align: center;
  }
}

It aligns properly.