Media queries are not working

Hello :slight_smile:

I guess it’s stupid, but for some reason, my media queries are not working.

I have this scrollbar which looks fine on a notebook devices. See screenshot:

But on a big screen it looks like this:

So I wanted to fix it with this piece of code:
@media only screen and (min-width: 1153px) {
#container::-webkit-scrollbar-track:horizontal {
margin: 0 1000px !important;

Which DOES really fix the issue and the scrollbar looks good on a big desktop. But for some reason it overrides the previous code for otherscreen:
#container::-webkit-scrollbar-track:horizontal {
margin: 0 400px;

so now the scrollbar has completely disappeared on notebook devices.

Does anybody have any idea, how to write media queries so it will not override other code? I am writing the code directly into page - setting - custom code.

Thank you so much!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)