Code for background colour creating bug on all pages

Site URL: https://www.judith-teichman.com/about

I'm trying to make two pages on my site a different colour (orange) from the rest (blue). Unfortunately injecting the code under the advanced section of these pages seems to create a bug where all pages turn orange *until* i reload the page (any page with the wrong colour). (This bug extends to the answer to my last question of inserting a banner image on individual blog entries).

The code i injected on the About page is this: (https://www.judith-teichman.com/about)

Quote

<style>
.Main {
background-color: #ba2b08 !important;
}
</style>

The code i injected on the blog page is this: (https://www.judith-teichman.com/blog2)

Quote

<style>
.Main {
background-color: #ba2b08 !important;
}

h2 {color: #2b328c !important;}
 
</style>
</head>

In summation go to any page on my site, then hit reload and the background colour changes. How can i stop this while also having two of my pages (about and blog) be orange, and every other page be blue?

Thanks so much guys, you are grand!

Here is how I would update your code. For the About page:

<style>
  /* the About page */
#collection-5f737d55534a7040ba70ad06 .Main {
	background-color: #ba2b08 !important;
}
</style>

and for the Blog page:

<style>
  /* Blog page */
#collection-5f8892e86db31c5dccf8050e .Main {
	background-color: #ba2b08 !important;
  }

#collection-5f8892e86db31c5dccf8050e h2 {
  color: #2b328c !important;
  }
 
</style>

Hey Tazmeah,

I inserted your code, but the problem persists 😞

Do you have any other ideas?

https://www.judith-teichman.com/blog2
https://www.judith-teichman.com/about

Thanks so much

No the code was still not working. I just looked again (see pic)

But, Yes, it was the ajax loading!

Thanks so much!