Reduce padding between Header and container for all pages

Site URL: https://runningineights.squarespace.com/

Hello! I have two issues. 

How do I reduce the padding globally under the header. The gap is still far too wide even when I've decreased this in section options.

Also, there's a white bar that shows itself in mobile right above the footer (attached). How do I get rid of this or globally change the sites background color?

Thank you so much for any help!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
#page article section:first-child {
    padding-top: 20px !important;
}

}

and remove this code

#footer-sections {
    margin-top: auto;
}

@tuanphan Thank you for responding. I tried this code out but it wasn't working. The padding didn't change at all. I'm sorry, I may have not explained it well. I attached a screenshot marking the area with a red rectangle I want to affect, if that helps at all.

Thanks again for your help!

@media screen and (max-width:767px) {
#page article section:first-child {
    padding-top: 20px !important;
}

}

13 hours ago, bravethestorm said:

@tuanphan Thank you for responding. I tried this code out but it wasn't working. The padding didn't change at all. I'm sorry, I may have not explained it well. I attached a screenshot marking the area with a red rectangle I want to affect, if that helps at all.

Thanks again for your help!

@media screen and (max-width:767px) {
#page article section:first-child {
    padding-top: 20px !important;
}

}

You mean on desktop or mobile? Above code for mobile