Mobile container space

Hello,

I'm using the below CSS to give a border and border-radius to the main content area in tablets and desktops. I don't want either on mobile.

@media(min-width: 770px) {.separate-containers .inside-article {
 border: 1px solid #F7C2C5;
border-radius: 20px;
 }

It works.

Then I'm using the below CSS to make the margin of main container to zero in mobile.

@media(max-width: 769px) {.separate-containers .site-main {
        margin: 2px;
    }

Both codes work when used individually. But when both are added, the zero margin for mobile containers(second code) is not in effect.

I'm guessing it has something to do with the codes, which I got from this forum itself.