Customer CSS for Header Color

Site URL: https://brecha.online

Hi! I'm trying to figure out a way to change the color of my header on one specific page of my website (it's black throughout the website and I want to make it yellow on one page). 

I followed this helpful article and was able to find a code snippet that makes the header yellow while I'm on the custom CSS page, but whenever I leave, the live website goes back to the black header. 

Can someone help me figure out where the error is? As mentioned, I would like to ideally add this to a specific page, so if anyone could also recommend how to do this (via unique page id for instance) that would be very much appreciated!
 

.header#header {position: fixed!important;}

.header-nav-folder-content {
   background: #fac124!important;
}

body:not(.tweak-transparent-header) .black .header-announcement-bar-wrapper {
    background-color: #fac124;
}

If you use Business Plan, add to Page Settings > Advanced > Header

<style>
  .header-announcement-bar-wrapper {
    background: red !important;
}
</style>

If you use Personal Plan, add Code Block > Insert above code

@tuanphan Thank you so much, that worked beautifully!! 

Do you also know how to set a custom color for the button in the header on that particular page?

7 hours ago, gambreu said:

@tuanphan Thank you so much, that worked beautifully!! 

Do you also know how to set a custom color for the button in the header on that particular page?

Which plan do you use? Personal or Business

@tuanphan Persona, but I actually managed to do it by adding this code block on that particular page:

<!--Navigation bar-->
<style>
.header-announcement-bar-wrapper {
    background: #fac124!important;
    color: #fac124!important;
  }
</style>

<!--Navigation dropdown-->
<style>
.header-nav-folder-content {
   background: #fac124!important;
   color: RGB(0,0,0)!important;
</style>

<!--Button color-->
<style>
.btn.btn--border.theme-btn--primary-inverse {
   background: RGB(0,0,0)!important;
   color: #fff;
} 
</style>