Responsive column jumps on specific width - html

Question

This is my first question over here, I searched the site but I really couldn't find a decent answer. My problem is pretty specific.
On full resolution my homepage consists of four columns, however, when the window-width gets below 960, it transforms in to two columns, this is the code I used:
The HTML:
<div class="columns">
<div class="begin col14">
<h2>Title</h2>
Content
</div>
<div class="begin col14">
<h2>Title</h2>
Content
</div>
<div class="begin col14">
<h2>Title</h2>
Content
</div>
<div class="begin col14">
<h2>Title</h2>
Content
</div>
</div>
The CSS:
#media all and (max-width: 960px) {
.begin {
width:46%;
margin:0px 2% 2em 2%;
float:left;
}
}
The problem is only showing on a browser-width of around 619px, then the first column on the second row jumps to the next row.
For an example, please check: www.visiamedia.nl
I hope someone can help me out, it really bothers me.
Greetings

Answer 1

That's because your boxes are different heights when resized - and first one is pushing other floats aside. You could potentially fix the issue by setting a media query with a specific height between about 515px to 640px:
#media all and (min-width: 515px) and (max-width: 640px) {
.begin {
height: 190px;
}
}

Answer 2

That's because you have a width of 46%. Change it to 21%
#media all and (max-width: 960px) {
.begin {
width:21%;
margin:0px 2% 2em 2%;
float:left;
}
}