First-child not removing margin - html

Question

links-column:first-child: margin-left:0%
is not triggering, I have the exact same code on another section of the site (rev-column) and this is working so not sure why it doesn't work.
fiddle: https://jsfiddle.net/82hLzm2v/2/
<div class="twelve columns">
<div class="links-section-header"></div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
</div>
.links-column { width: 32%; margin-left:1%; float:left; }
.links-column:first-child { margin-left: 0%; }
}.links-cats-wrap{
display:block;
float:left;
width:100%;
height:400px;
background-color:#fff;
margin-bottom:10px;
border:1px solid #DDDDDD;
Laravel code:
#foreach ($links as $link)
<div class="twelve columns">
<div class="links-section-header">{{ $link->category }}</div>
#foreach ($link->linksitems as $linksitem)
<div class="links-column">
<div class="links-cats-wrap">
<div class="links-cats-img"><img class="u-full-width" src="images/links/{{ $linksitem->img }}"> </div>
<div class="links-cats-link">{{ $linksitem->link }}</div>
<div class="links-cats-desc">{{ $linksitem->text }}</div>
</div>
</div>
</div>
#endforeach
#endforeach

Answer 1

Your first <div class="links-column"> is not the first first child of the parent div.
You need to move <div class="links-section-header"></div> outside <div class="twelve columns">.
Code adapted from your JSFiddle.
/* For devices larger than 550px */
/* Review Columns*/
.rev-column:first-child { margin-left: 0%; }
.rev-column:nth-child(odd){ margin-left: 0%; }
.rev-column { width: 49%; margin-left:2%; float:left; }
/* Links Columns*/
.links-column { width: 32%; margin-left:1%; float:left; }
.links-column:first-child { margin-left: 0%; }
/*Columns*/
.container { width: 100%; height:auto; overflow:hidden; padding: 0 0px; box-sizing: border-box; }
.column,
.columns {
margin-left: 2%;}
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 49%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 68%; }
.nine.columns { width: 76.0%; } /*increased from 74% column margin decreased from 4% to 2%*/
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
.links-wrap{
width:100%;
min-height:400px;
height:auto;
overflow:hidden;
background-color:#f2f2f2;
}.links-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:;
margin: 0 auto;
padding-top:10px;
padding-bottom:10px;
}.links-wrap-wrap{
width:960px;
height:auto;
overflow:hidden;
}.links-section-header{
color:#fff;
width:100%;
height:30px;
line-height: 30px;
background-color:#605860;
margin-bottom:10px;
}.links-cats-wrap{
display:block;
float:left;
width:100%;
height:400px;
background-color:#fff;
margin-bottom:10px;
border:1px solid #DDDDDD;
}.links-cats-wrap:last-child {
margin-right: 0px;
}.links-cats-img{
width:100%;
height:160px;
background-color:;
line-height:40px;
color:#fff;
font-weight:700;
font-size:16px;
}.links-cats-link{
width:100%;
height:60px;
background-color:;
line-height:60px;
font-weight:300;
font-size:16px;
margin: 0 auto;
text-align:center;
}.links-cats-link:hover{
color:#ff0000;
}.links-cats-desc{
width:100%;
height:110px;
padding:20px;
background-color:;
line-height:20px;
}.links-share{
width:300px;
height:30px;
}.links-share-twitter{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#32ccfe;
text-align:center;
}.links-share-facebook{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#3E5B97;
text-align:center;
}.links-share-google{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#F8694D;
text-align:center;
<!-- content -->
<div class="links-section-header"></div>
<div class="twelve columns">
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
</div>