Фонд 5: удаление пробела слева от моей колонки

Question

Я хочу избавиться от пробела слева от моей зеленой кнопки на this screenshot. Кажется, я не могу найти способ удалить его.

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> 

аа

Answer 1

По умолчанию Фонд применяет правое и левое заполнение для колонн. Я создал фрагмент с несколькими вариантами. Вы можете настроить таргетинг на столбец; или просто создайте класс и добавьте правило для левого заполнения.

/* -- 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>