Правила медиа-запросов CSS не применяются

Мне поручено внести небольшое обновление в существующий виджет на веб-сайте в стиле панели инструментов. Текущий виджет отлично смотрится на больших экранах, но ужасен на небольших устройствах. Я пытаюсь добавить несколько правил CSS, которые следует применять только тогда, когда ширина дисплея не превышает 768 пикселей.

Я немного поработал с адаптивным дизайном с помощью Bootstrap. Мне не приходилось накатывать собственные запросы @media.

Вот CSS ...

@media (max-width: 768px) {  // Bootstrap sm.
    #sidenav { position: static; text-align: center; }
    #sidenav .primary-systems li {
        display: inline-block;
        width: auto;
    }
}
/* Stuff I added above;  stuff I inherited below */
#sidenav { width:265px; background-color: #fff; position: relative; left: -44px; top: 16px; border: 1px solid #000; padding: 8px 0; }
#sidenav ul { margin: 0; padding-left: 0; }
#sidenav div.hr { border-bottom: 1px dotted #353535; margin: 0 auto 15px auto; }
#sidenav li { list-style-image: none; list-style-type: none; margin-left: 0; }
#sidenav li a { white-space: nowrap; display: block; width: 170px; height: 50px; padding-left: 80px; font-family: 'lato'; font-weight: 400; line-height: 50px; font-size: 18px; color: #353535; text-decoration: none; background: transparent url("/jasig-widget-portlets/images/icons/sidenav.png") no-repeat 15px 0; }
#sidenav li a:hover { background-color: #f3f3f3; }
#sidenav .angel a { font-family:'Lato', sans-serif; background-position: 15px 0; }
#sidenav .web-advisor a { font-family:'Lato',sans-serif; background-position: 15px -50px; }
#sidenav .tartan-card a {font-family:'Lato',sans-serif; background-position: 15px -100px; }
#sidenav .course-schedule a {font-family:'Lato',sans-serif; background-position: 15px -150px; }
#sidenav .directory a {font-family:'Lato',sans-serif; background-position: 15px -200px; }
#sidenav .faq a {font-family:'Lato',sans-serif; background-position: 15px -250px; }
#sidenav .help-desk a {font-family:'Lato',sans-serif; background-position: 15px -300px; }
#sidenav .financial-aid a {font-family:'Lato',sans-serif; background-position: 15px -350px; }
#sidenav .transcripts a {font-family:'Lato',sans-serif; background-position: 15px -400px; }
#sidenav .important-dates a {font-family:'Lato',sans-serif; background-position: 15px -450px; }
#sidenav .semesters a {font-family:'Lato',sans-serif; display: none; }
#sidenav .banner { margin: 15px auto 15px 30px; }
#sidenav .support {font-family:'Lato',sans-serif; margin-top: 15px; padding-left: 20px; }
#sidenav p.secure {font-family:'Lato',sans-serif; margin: 20px; }
#sidenav p.server { margin-left: 24px; }

Инструменты разработчика Chrome показывают текущую версию этого файла на вкладке «Источники» (это не проблема с кешем). Унаследованные правила CSS работают; добавленные мной строки не действуют. Они даже не отображаются в списке переопределенных правил, когда вы смотрите на элементы в инструментах разработчика Chrome.

Кто-нибудь может увидеть, что мне не хватает?