4 Square Quad

Four squares neatly tucked into an outer square container.

HTML

<div class="content-container">
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>    
</div>

CSS

body { background: #eae2d7; }

.content-container {
    max-width: 570px;
    height: auto;
    border-radius: 10px;
    border-top: 50px solid #e81354;
    background: #ffffff;
    display: block;
    padding:0;
    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;
}