How to bring these CSS changes into my theme?

Hi guys,

After several questions and a lot of readings I still can not reach a simple CSS change in my Mx theme, could someone give very concretely the places where to change to achieve the next:

      .btn,
.mx-button {
color: white;
border-radius: 3px;}


.btn-default:hover {
background-color: white;
    color: #f23751;
}



.mx-list > li {
border: 1px #ddd;
    border-style: solid none none;
    }

.mx-list > li:last-child {
    border-bottom-style: solid;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

What I do is; 1 - (don't use Skout (gives error when installing) or Koala ) i depackage the zip files of the theme 2 - then adjust (as recommended in doc's) _custom-variables.scss in theme\styles\sass\custom with the above css comments

Result: Some of the css comments are processed and some are not processed

Where could I place all the custom css that everything will be overwritten by my custom css?