I have been trying to modify some global class items including .border, .section-title and .service-item. Thought the changes work if I implement in the style.css, I can't seem to get the changes to work in the Custom CSS.

Here is an example where I am trying to tighten up some spacing on the margin of the .border class:
Change this:
.border {
background: none repeat scroll 0 0 #999999;
display: block;
height: 2px;
margin: 0 auto;
width: 100px;
margin-bottom: 40px;
}

to this:
.border {
background: none repeat scroll 0 0 #999999;
display: block;
height: 2px;
margin: 0 auto;
width: 100px;
margin-bottom: 20px;
}

I have added this to the Custom CSS:
.border {
margin-bottom: 20px !important;
}
This works when I put in style.css but in the Custom CSS it does not change the margin.

What am I doing wrong?
Thanks in advance?

Here is what I put in Custom CSS:

.border {

margin-bottom: 20px !important;

}

.section-title {

margin-bottom: 30px !important;

}

.service-item {

margin: 10px 0 !important;

}

Seems to be correct but when I view and inspect element it still shows values from style.css.

Do you see something missing?

Any response on this?