old css code doesn't work

[MrP]

Hi all.

I had some css that was working until the recent update - not anymore...

1) I find the banner images at the top of the home page and collection pages rise up behind my top nav bar on mobile (under my logo) so I added code to move them down

2) I had code making my H2 the same size as H1 on mobile 

Can any one suggest a work around? I'm happy to add code, i just can't write it. my website is www.mrpoppinsandco.com

My code:

/* Space under logo on mobile product pages*/
@media only screen and (max-width: 480px) {
.has-padding-top {
padding-top: 40px;
}
}

/* Space under logo on mobile collection pages*/
@Media only screen and (max-width: 480px) {
#shopify-section-collection-template {
margin-top: 120px;
}
}

/* Space under logo on mobile home page*/
@Media only screen and (max-width: 480px) {
.index-sections {
margin-top: 90px;
}
}
/* Space under logo on standard pages*/
@Media only screen and (max-width: 480px) {
.container.page.content {
margin-top: 100px;
}
}

/* Space under logo on reviews pages*/
@Media only screen and (max-width: 480px) {
#judgeme_all_reviews_page {
margin-top: 120px;
}
}

/* Space under logo on cart pages*/
@Media only screen and (max-width: 480px) {
#shopify-section-cart-template {
margin-top: 100px;
}
}

/* H1 sizes on mobile*/
@media (max-width: 500px) {
h1 {
font-size: 23px;
}
}

/* H2 sizes on mobile*/
@media (max-width: 500px) {
h2 {
font-size: 23px;
}
}