Theme style.css override

Sorry, I’m not familiar much with the style sheets, so my question might seem silly to you.

I need to override my theme style sheet which indicates this rule right now:

[class*='col-'] {
  margin-left: 2.04%;
}

With this rule:

[class*='sabai-col']{
  margin-left: 0;
}

Right now it looks like this:

/***** Columns *****/

.row [class*='col-']:first-child { margin: 0; }
[class*='col-'] { float: left; margin-left: 2.04%; overflow: hidden; }
.col-1-1 { width: 100%; }
.col-1-2 { width: 48.98%; }
.col-1-3 { width: 31.973%; }
.col-2-3 { width: 65.986%; }
.col-1-4 { width: 23.47%; }
.col-3-4 { width: 74.49%; }
.col-1-5 { width: 18.368%; }
.col-1-6 { width: 14.966%; }
.col-1-7 { width: 12.537%; }
.col-1-8 { width: 10.715%; }
.clear { clear: both; }
.clearfix { display: block; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; margin: 0; padding: 0; }

/***** Typography *****/

So where exactly should I place the new rule? Is it going after the line [class*='col-'] { float: left; margin-left: 2.04%; overflow: hidden; }
or I should erase this line and place the new rule INSTEAD of it?

I’m afraid to mess the entire site up.