Code Injection on a Single Page is affecting whole site

Hello!

I'm creating a page on my site that I'd like to have a black background. The rest of my site is white background. 

I've uploaded an alternate logo to use on this page only in Design > Custom CSS > Manage Custom Files >Add Images or Fonts 

I've injected the following code in the Custom CSS on the specific page to 1) Change the logo at the top to a new file that reflects the black background with white text on both mobile and web; 2) Change the background of the Main, Header Top, Header Bottom, and Footer to Black; 3) Change the h1, h2, h3, p, strong, and a font colors to White; 4) Change the Contact Form on this page to have a darker background color and white text:

Quote

<style>
.Header-branding {    
display: block;    
max-width: 100%;    
max-height: 175px;    
content: url("https://static1.squarespace.com/static/571066131bbee00fd7efe3be/t/5ee2292d8a700e45f0457bf6/1591879981834/2020+B+Logo+Black.jpg") !important;

/* if logo needs to be centered */
    margin-left: auto;    
    margin-right: auto;
  }
.Mobile-bar-branding-logo {
display: block;
max-width: 100%;
max-height: 175px;
content: url("https://static1.squarespace.com/static/571066131bbee00fd7efe3be/t/5ee2292d8a700e45f0457bf6/1591879981834/2020+B+Logo+Black.jpg") !important;
/* if logo needs to be centered */
margin-left: auto;
margin-right: auto;
}
.Main {
background-color: #000000 !important;
}
.Header--top {
background-color: #000000 !important;
}
.Header--bottom {
background-color: #000000 !important;
}
.Footer {
background-color: #000000 !important;
}
#collection-5ee21ba75aad6b31a900f7cc h1 { color: #FFFFFF !important; }#collection-collection-5ee21ba75aad6b31a900f7cc h2 { color: #FFFFFF !important; }#collection-5ee21ba75aad6b31a900f7cc h3 { color: #FFFFFF !important; }#collection-5ee21ba75aad6b31a900f7cc p { color: #FFFFFF !important; }#collection-5ee21ba75aad6b31a900f7cc strong { color: #FFFFFF !important; }#collection-5ee21ba75aad6b31a900f7cc a { color: #FFFFFF !important; }
.form-block { 
/* block background color */  background-color: #3E3C47;
/* text color */ color: #FFFFFF; 
}
</style>

When I go to my homepage http://www.beetwosweet.com everything loads normally, I can click on links, and the background of the page continues to stay white as it always has. This is good! No problems... yet.

When I go directly to the new page I've created (it's not linked in the site navigation yet) http://www.beetwosweet.com/better-together the page loads the way I'd like to see it (yay!), however once I click any of the site navigation, the background of the header and footer continue to stay black, and the site nav remains white (boo).

As I click around, I notice that the pages that are Index pages appear to not have the background of the page change (header and footer stay black with white nav), but the FAQ, for example, is a simple Page, just like the "better-together" page, and it is now a black background, but with black text. 

If I refresh the page, the site styles all refresh, and the white background goes back to what it looks like normally on the site. 

On Mobile, the header color does not change to black, but the footer does. Also, on Mobile, the site moves left and right as well as vertically (this has never happened before).. 😞

Anyone have any ideas what I can change in my page code injection to make all of this work?
 

Thank you for any help you can give me!!!

-Brittany

UPDATE: I've updated the code to reflect the collection# for all of the settings and it seems to have improved overall function! Also, by not swapping out the logo and keeping the header with the site-wide settings, the page seems to load faster and respond normally. 

I fixed the problem on mobile where the page was scrolling L/R - it was an issue with the length of text on the form button. 

Hopefully this helps someone else out there! 

Quote

<style>

#collection-5ee24076d556ae0e8825c022 .Main {
background-color: #000000 !important;
}
#collection-5ee24076d556ae0e8825c022 .Footer {
background-color: #000000 !important;
}
#collection-5ee24076d556ae0e8825c022 h1 { color: #FFFFFF !important; }#collection-5ee24076d556ae0e8825c022 h2 { color: #FFFFFF !important; }#collection-5ee24076d556ae0e8825c022 h3 { color: #FFFFFF !important; }#collection-5ee24076d556ae0e8825c022 p { color: #FFFFFF !important; }#collection-5ee24076d556ae0e8825c022 strong { color: #FFFFFF !important; }#collection-5ee24076d556ae0e8825c022 a { color: #FFFFFF !important; }
#collection-5ee24076d556ae0e8825c022 .form-block { 
/* block background color */  background-color: #3E3C47;
/* text color */ color: #FFFFFF; 
}
</style>