Почему CSS-код не работает

---

Привет, ребята, у меня есть этот HTML-код

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

код работает нормально, и я стилизовал & lt;DIV> С помощью css в файле с именем изготовленная на заказ.в CSS.
Вот код стиля;

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%;
}

CSS-код работает нормально, он создает стрелку, обращенную вниз. проблема заключается в следующем коде

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

я хочу, чтобы стрелка(div) не отображалась при просмотре на мобильных устройствах. Код, кажется, работает, когда я тестирую его в браузере (инструменты разработчика), но по какой-то причине код не работает, когда я сохраняю его в браузере. изготовленная на заказ.в CSS файл, стрелка все еще видна.

Что я уже пробовал:

Вот список альтернативных кодов, которые я опробовал

@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;
 }
}

все эти коды работают, когда я тестирую его в браузере (инструменты разработчика), но не тогда, когда я сохраняю его в изготовленная на заказ.в CSS файл.
что я упускаю?

---