Override Divi Builder CSS

Does anyone know the answer to this:
I am actually using Extra on a client's site. I can't find an answer to this anywhere. How do I override the Divi Builder CSS. If I change the margin-top using the input area of the builder, it automatically puts an !important attribute into the CSS. Then when I come to write some @media queries, I use for example:
/* Tablets in portrait mode (480-800px) */
@media only screen and ( min-width: 480px ) and ( max-width: 800px ) {
.port557 {
margin-top: -54px !important;}}
But it won't override the builders !important CSSm which is:
.et_pb_text_8 {
margin-top: -15px !important;
margin-left: 1% !important;}
I could put in an #ID instead but I am sure this isn't good practise, and if I needed many complex @media queries then some parts would get overridden.
Am I going about this the wrong way or is there a feature I am missing.
Love to hear your thoughts

 

I don't completely understand you but there is an option if you go to section, row or module settinds, cell padding and cell margins top bottom left right, use these options instead of doing it manually using css.

 

Thanks but I worked it out. There's a custom css section on the Divi builder that over rights the !important attribute