Change header color on just one page

Hi.

You are confused with the code. You have added different code in different places. The green code takes precedence.

Use the browser code inspector to identify problems.
Both of your snippets are visible in the code inspector. One takes precedence over the other.

To increase the precedence, you can add !important after the value.

To avoid confusion, I recommend using only the custom.css file for your code. Using code in the template and page fields puts that code right on the page, which degrades speed and confuses, as in your case.

To change the Header color (or customize any other elements) on a separate page, add the page class in the menu item settings. Write your code using this class as a parent.

For example, if you add the my-own-page-style class to the page, the code looks like this:

.my-own-page-style #sp-header {
    background: #FFFFFF;
}

Another way, create a copy of the template style, apply it to the desired page, add a unique class for Header in the Layout Builder settings. For example my-own-header-style.
Then, the code will look like this:

#sp-header.my-own-header-style {
    background: #FFFFFF;
}