trouble with padding, and now all custom CSS

Site URL: https://www.gioiamontanaconnell.com/

Hello,

I used custom CSS to modify the padding around my homepage gallery. First I was able to get it to work for the top and not the bottom, but now it appears that the changes have reverted and it is no longer working at all. Would be great to address both the top and bottom padding issue. Have also had padding issues elsewhere on the site in the past but this one is the most important for me to address so I didn't take notes for the others. 

THANKS!!

Here is all of my custom CSS...

[data-section-id="5f7a06e63eaedf59be87ccb0"] {
  padding-top: -20px !important;
}

P4 {
  font-size: 70%;
  line-height: 70%;
}

@media screen and (max-width:800px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
      grid-row-gap: 3vw !important;
}
}

@media (max-width: 800px) {
    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
        width: 100%!important;
    }
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        padding: 0 10px;
        height: auto!important;
        display: block!important;
     }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        padding: 10px!important;
        transform: none!important;
        width: 100%!important;
        display: block;
       }
}

Hi. Do you still need help?

I do! Do you have any recommendations for me?

Also looking to add code to scale content downward for smaller computer screens (currently working at 3840 x 2160, saw it on a friend's smaller screen the other day and it needs some work...), but since none of the CSS seems to be working will need to get on that once the question above is addressed.

Thank you thank you!!!!