Evenly spacing out <div>s in a row with spaces can appear to be tricky but is actually pretty simple to do. When I first learned CSS, I used to add margins to each box or <div> on each side to create the spaces, calculating the appropriate percentage amounts for widths and margins. That was prior to using the box-sizing: border-box; CSS declaration. By using box-sizing: border-box; declaration, the margin and padding amounts are calculated for you automatically.

By using the method below, you can easily specify the width of each container in each row, without having to use margins to place gaps in between each <div>. Instead of margins, padding is used instead to create the illusion of gaps. This is accomplished by using no background (or transparent) on the parent element.

CSS

.box { 
	float: left;
	padding: 0 8px;
	width: 25%;
	height: 400px;
	text-align: center; 
	box-sizing: border-box;
}

.box > div
{
	background-color: #aaa;
	height: 100%;
	line-height: 400px;
	font-size: 2rem;
	font-weight: bold;
}

HTML

<div class="box">
   <div>Box 1</div>
</div>
<div class="box">
   <div>Box 2</div>
</div>
<div class="box">
   <div>Box 3</div>
</div>
<div class="box">
   <div>Box 4</div>
</div>

The amount of padding to add to each parent element (class=”box”) can vary, but 8px appears to be a good number, since that would calculate to 16 pixels in between each box.. The children elements of each <div> with a class of “box”, should have a background color declared.