Box offset when using the pure css framework

Question

I'm using pure css for my website. The problem is, that the boxes have a weird offset, that is definied nowhere The boxes don't move even when I set padding and margin to zero. This causes the last box to move in the second row.

HTML:

<div class="pure-u-4-24 outer">
<div class="inner-ib inner"></div>
</div>

<div class="pure-u-5-24 outer">
<div class="inner-ib inner"></div>
</div>

<div class="pure-u-11-24 outer">
<div class="inner-ib inner"></div>
</div>

<div class="pure-u-4-24 outer ">
<div class="inner-ib inner"></div>
</div>

CSS:

.inner {
  background-color: rgba(44, 62, 80, 0.75);
}
 .outer {
   padding-top: 10vh;
}
.inner-ib{
  height: 90vh;
}

How the website looks

Answer 1

Put everything inside the pure-g container for your columns to work correctly..

http://codeply.com/go/rVcX2Bhpko

<div class="pure-g"> 
      ..
</div>