Remove Squarespace Line padding on mobile

Site URL: https://www.vallettacreative.com/home

Hi Everyone, 

I'm hoping someone can help. Im trying to figure out how to reduce the top and bottom padding on my mobile website. The gap between my sections are to large and would like to manipulate this smaller. I tried using the following code below, however it breaks some of my other code I currently have. Does any one know of another code that can help target just padding without breaking other code on my website? 

@media only screen and (max-width: 640px)
.sqs-block-horizontalrule {
margin-top:-25px !important; margin-bottom:-25px !important;
}

In addition, would this also work for the footer? 

And finally how can I get rid of this grey bar under my footer. 

Thank you so much! 

I figured out how to remove the bar from my footer. 

.ancillary-mobile-bar-cart-position-bottom-center .Mobile-bar--bottom {
  display: none !important;
}