Menu icon Foundation
Why aren't gutters appearing between my columns?

I'd like there to be gutters between each column but for some reason I can't get it to work.

<div class="categoriesCon row">

<div class="boxBorder small-10 medium-2 medium-offset-1 columns">
    <h3 class="boxTxt">Box1</h3>
</div>

<div class="boxBorder small-10 medium-2 columns">
    <h3 class="boxTxt">Box2</h3>
</div>

<div class="boxBorder small-10 medium-2 columns">
    <h3 class="boxTxt">Box3</h3>
</div>

<div class="boxBorder small-10 medium-2 columns">
    <h3 class="boxTxt">Box4</h3>
</div>

<div class="boxBorder small-10 medium-2 columns end">
    <h3 class="boxTxt">Box5</h3>
</div>

</div>
.categoriesCon {
	margin-top: 100px;
	background-color: red;
}

.boxBorder {
	border: solid 1px #f3f3f3;
	background-color: rgba(243,243,243,0.5);
    overflow: hidden;
	height: 150px;
	position: relative;
}

.boxTxt {
	margin: 0;
	color: #333333;
	text-align: center;
	font-size: 14pt;
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

columnsgutterscsshtml

I'd like there to be gutters between each column but for some reason I can't get it to work.

<div class="categoriesCon row">

<div class="boxBorder small-10 medium-2 medium-offset-1 columns">
    <h3 class="boxTxt">Box1</h3>
</div>

<div class="boxBorder small-10 medium-2 columns">
    <h3 class="boxTxt">Box2</h3>
</div>

<div class="boxBorder small-10 medium-2 columns">
    <h3 class="boxTxt">Box3</h3>
</div>

<div class="boxBorder small-10 medium-2 columns">
    <h3 class="boxTxt">Box4</h3>
</div>

<div class="boxBorder small-10 medium-2 columns end">
    <h3 class="boxTxt">Box5</h3>
</div>

</div>
.categoriesCon {
	margin-top: 100px;
	background-color: red;
}

.boxBorder {
	border: solid 1px #f3f3f3;
	background-color: rgba(243,243,243,0.5);
    overflow: hidden;
	height: 150px;
	position: relative;
}

.boxTxt {
	margin: 0;
	color: #333333;
	text-align: center;
	font-size: 14pt;
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}
Rafi Benkual almost 3 years ago

Looks like there is gutter between the columns http://codepen.io/rafibomb/pen/VmNdxG

Grid columns use padding, so the space is inside. If you need a background that doesn't extend the full width of the column, then you can add background to a div inside the column.