Trying to target element in header with css

Hello. I am having trouble targeting an element properly and was hoping for some advice.

I am using a plugin (T(-) Countdown) for a countdown clock and have it as a widget in my theme header.

I want it to display on the homepage header but not on the other pages where the header is also appearing.

I am able to successfully hide it on all of the pages by adding this css snippet under customize > additional css:

.header-widget {
display: none !important;
}

So I thought I would be able to use that CSS with the plug in "simple css" on my homepage, to only target the homepage. But it has no affect. Why is that? Is it because I am trying to target the global header and "simple css" can only target the page contents?

Do you have any advice on solving my problem of hiding the widget within the header on all the pages except the homepage?

My website has no URL yet so I have included a temp hosts.cx URL.

Thank you.