Why won't my code hide the header on both pages?

[comvert]

I've inserted the following code to hide/remove the header and footer sections on two specific pages, but there seems to be a bug. Whatever I do, the footers hide successfully, but the header is only removed from one page and not the other. 

            <style>
#chocolate-tubeez .header{
    display: none !important;
}

#chocolate-tubeez .footer{
    display: none !important;
}

            <style>
#vanilla-tubeez .header{
    display: none !important;
}

#vanilla-tubeez .footer{
    display: none !important;
}

[wattsmork]

Hi @comvert ,

Could you share your store url please?

Thanks

[comvert]

yoso.ca

[wattsmork · Accepted solution]

@comvert Please replace code like this

<style>
    #chocolate-tubeez .header{
        display: none !important;
    }

    #chocolate-tubeez .footer{
        display: none !important;
    }

    #vanilla-tubeez .header{
        display: none !important;
    }

    #vanilla-tubeez .footer{
        display: none !important;
    }
</style>

[comvert]

This worked, thank you very much.