CSS из классов не применяется к содержимому навигации

Я не уверен, откуда вы взяли $gray-medium в качестве цвета, но изменение его на серый заставит цвет фона работать. Возможно, ваш приоритет стилей отключен, и стили для тега a перезаписывают их. Создание стилей для тега a успешно стилизует ссылки в вашем HTML.

.unpublished {
  background-color: gray !important;
  color: red;
}

//also tried this
.tab-content {
  .unpublished {
    background-color: green !important;
    color: red;
  }
}

a {
  color: green;
}

<ul class = "nav nav-tabs course-tabs" id = "course" role = "tablist">
        <li class = "nav-item">
            <a class = "nav-link active" id = "home-tab" data-toggle = "tab" href = "#home" role = "tab" aria-controls = "home" aria-selected = "true">
                <span class = "fas fa-info-circle"></span>
                About this course space</a>
        </li>
    </ul>

 <div class = "tab-content unpublished">
        <div class = "tab-pane fade show active" id = "home" role = "tabpanel" aria-labelledby = "home-tab">
            <div class = "unpublished">
                <span class = "fas fa-times-circle"></span>Course space is not published
                <a href = "#">Publish course space in Canvas arrow-right</a>
            </div>
       </div>
</div>

HTML

 <ul class = "nav nav-tabs course-tabs" id = "course" role = "tablist">
    <li class = "nav-item">
        <a class = "nav-link active" id = "home-tab" data-toggle = "tab" href = "#home" role = "tab" aria-controls = "home" aria-selected = "true">
            <span class = "fas fa-info-circle"></span>
            About this course space</a>
    </li>

</ul>

css

 .unpublished {
      background-color: grey;
      color: red;
    }

Если вы хотите стилизовать первый div, вы должны использовать это.

.tab-content .unpublished {
    background-color: green !important;
    color: red;
}

Кажется, вы используете переменные sass. Убедитесь, что все настройки sass верны. Под этим я подразумеваю, что main.scss и все партиалы, которые вы используете, работают нормально. Если не исправьте это исправлено и попробуйте еще раз.

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

Тем не менее, небольшой совет: всякий раз, когда вы оказываетесь в таком состоянии, когда ваш стиль не применяется и многое другое, вы должны проверить код в окне разработчика (Ctrl+shift+I в окнах и проверить стиль.

Это лучший способ узнать и решить свои проблемы самостоятельно.

Спасибо