The problem is in using both lengths in % and vh.
Try this:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
font-weight: 100;
}
.neat {
width: 50%;
max-width: 600px;
min-width: 320px;
margin: 0 auto;
}
.col {
float: left;
padding: 2rem;
width: 90vh; /*** Important bit changed width:50%; to width:90vh; ***/
max-width: 50%; /*** Important bit added max-width:50%; ***/
}
.square {
position: relative;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.square-inner {
position: absolute;
background-color: #333333;
color: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
}
.mw {
max-width: 90vh;
}