I'm trying to add CSS for mobile and it won't stick

I am trying to add CSS for the responsive/phone version of my site.

As it is now, the elements overflow the right/left sides of the device in portrait mode.

I tried the selecting the phone icon in Nicepage and adding the following CSS.

@media (max-width: 575px) h2:not(.u-subtitle) {
font-weight: 400;
font-size: 2.25rem;
line-height: 1.1;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;

I also tried setting all of the elements to margins of 20 right and 20 left in the phone mode in nicepage.

I also tried adding custom CSS in Wordpress (Latest version)

I've been messing with that a bit but here is the latest

.wp-block-image img

{
height: auto;
}
.webpexpress-processed img
{
height: auto;
}

pre.wp-block-code {

margin-left: 8% !important;

margin-right: 10% !important;
}

pre.wp-block-preformatted {

margin-left: 8% !important;

margin-right: 10% !important;
}

@media (max-width: 575px)
h2, h2:not(.u-subtitle) {

margin-left 20px !important;
margin-right 20px !important;
padding-left 20px !important;
padding-right 20px !important;

}

p, p:not(.u-text-variant) {

margin-left 20px !important;
margin-right 20px !important;

}

It seems that no matter what I do, if I inspect the code, the margin changes are not there in the CSS. I can manually change the CSS in settings and it works but I can't make the CSS stick.

The post in question is https://www.chrismendlascorner.com/2020/10/05/add-a-battery-backup-to-your-garage-door-opener/ but it seems all posts on that site have the same issue.

I've attached my exported zip from nicepage.

I'd appreciate any ideas.

Thanks

Chris Mendla