Why CSS code is not working

See more:

CSS

HTML

CSS3

Hi guys, i have this HTML code

<div id="arrow-down"> </div>

the code works fine and i styled the <DIV> using css on a file named custom.css.
Here is the styling code;

div#arrow-down {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #2e3192;
    margin: 0% 46%;
}

The CSS code works fine, it creates an arrow facing down. the problem comes in the following code

@media all and (max-width: 768px) {
div#arrow-down
 {
   display: none !important;
 }
}

i want to make the arrow(div) to not display when being viewed on mobile devices. The code seems to work when i test it on the browser (developer tools) but for some reason the code does not work when i save it in the custom.css file, the arrow is still visible.

What I have tried:

Here is a list of alternate codes that i tried out

@media all and (max-width: 768px) {
div#arrow-down
 {
   visibility: collapse !important;
 }
}

@media all and (max-width: 768px) {
div#arrow-down
 {
   visibility: hidden !important;
 }
}

@media all and (max-width: 768px) {
div#arrow-down
 {
   border-top: 0px solid #2e3192; !important;
 }
}

all these codes work when i test it on the browser (developer tools) but not when i save it in the custom.css file.
what am i missing?