Your problem is you set the width
to 50%
but not minus the 10px
margin, also your HTML code has line breaks between the div
s, so you should set the font-size
to 0 for the container (to eliminate the 4px
of the line break):
.content-container {
...
font-size:0;
}
.inner-square {
background: #cccccc;
width: calc(50% - 8px);
height: calc(50% - 8px);
margin: 5px;
display:inline-block;
}
.inner-square:nth-child(even) {
margin-left:0;
}
.inner-square:nth-child(n+2) {
margin-top:0;
}