A CodePen by Daniel Riemer. Flexible columns – fixed width gutter - Using a border as faux margin

index.html

<h1>Flexible columns &mdash; fixed width gutter</h1>
<h2>Using a border as faux margin</h2>

<div class="flexwrapper">
	<section></section>
	<section></section>
	<section></section>
	<section></section>
</div>

style.css

body { background: #eff5f5; }

.flexwrapper {
  margin-left: -1em;
}

.flexwrapper > section {
	float: left;
	width: 25%;
	border-left: 1em solid #eff5f5;
  box-sizing: border-box;
	margin-bottom: .5em;
	padding-top: 25%;
}

.flexwrapper > section:nth-child(1) { background: #a9cc5b; }
.flexwrapper > section:nth-child(2) { background: #39b4e0; }
.flexwrapper > section:nth-child(3) { background: #e4582b; }
.flexwrapper > section:nth-child(4) { background: #f8c624; }







/* Decorative bits and bobs */

body { font: 1.125em/1.4 'Source Sans Pro', sans-serif; background: #eff5f5; color: #31656e; text-align: center; padding: 4em 0; }
h1 { font-weight: 900; font-size: 1.6em; line-height: 1.2; }
h2 { font-weight: 400; font-size: 1em; color: #597a80; text-transform: uppercase; margin: .5em 0 4em; letter-spacing: .25em; }