Foundation 5: removing a gap at the left of my column - zurb-foundation

Question

I want to get rid of the gap at the left of my green button on this screenshot. I can't seem to find any way to remove it.
Markup:
<div class="row">
<div class="small-4 medium-5 large-4 columns">
<a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>
</div>
<div class="small-6 medium-5 large-6 columns">
<ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list">
<li id="jason_computing_self_paced">Self-paced</li>
<li id="jason_computing_hours_week">4 hours a week</li>
<li id="jason_computing_assignments">3 Assignments</li>
<li id="jason_computing_challenges">18 Challenges</li>
</ul>
</div>
</div>
aa

Answer 1

By default, Foundation applies a right and left padding to columns. I've created a snippet with a couple of options. You can target the column; or simply create a class and add a rule for left-padding.
/* -- target the first-child column -- */
.row .columns:first-child {
padding-left: 0;
}
/* -- create a class ('button-enroll' for example ) -- */
.button-enroll {
padding-left: 0;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="small-4 medium-5 large-4 columns button-enroll">
<a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>
</div>
<div class="small-6 medium-5 large-6 columns">
<ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list">
<li id="jason_computing_self_paced">Self-paced</li>
<li id="jason_computing_hours_week">4 hours a week</li>
<li id="jason_computing_assignments">3 Assignments</li>
<li id="jason_computing_challenges">18 Challenges</li>
</ul>
</div>
</div>