CSS не применяется к html

Я пытаюсь прикрепить файл CSS к моим HTML-файлам, но когда я запускаю сервер на localhost, CSS не применяется. Я проделал довольно большой объем работы по устранению неполадок, но каждый раз в итоге мне приходится вставлять нужный стиль прямо в HTML-документ, поскольку он не будет применяться, если его оставить в CSS-документе и связать через class="".

style.css:

.remove-default-btn {
        background-color: transparent;
        border: none;
        box-shadow: none;
}

.edit-color {
        color: #333
}

.post-link {
        text-decoration: none;
}

.post-text {
        padding-top: 0.5rem;
}

.post-img {
        float: left;
        margin-right: 1rem;
}

.child-comment {
        margin-left: 2rem;
}

.notification-badge {
        transition: 0.3s;
}

.notification-badge:hover {
        cursor: pointer;
        opacity: 0.75;
        transition: 0.3s;
}

.dropdown {
        position: relative;
        display: inline-block;
}

.dropdown-content {
        position: absolute;
        background-color: #f1f1f1;
        min-width: 350px;
        box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
        z-index: 1;
        font-size: 0.9rem;
}

.dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
}

.dropdown-content a:hover {
       background-color: #ddd;
}

.dropdown-item-parent {
        position: relative;
        display: block;
}

.dropdown-item-close {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 1.8rem;
        padding-right: 5px;
        transition: 0.3s;
}

.dropdown-item-close:hover {
        color: rgb(180, 25, 25);
        transition: 0.3s;
        cursor: pointer;
}

show_notifications.html:

<div class="dropdown">
    <span class="badge bg-primary notification-badge">{{ notifications.count }}</span>
    <div class="dropdown-content" id="notification-container">
        {% for notification in notifications %}
            {% if notification.post %}
                {% if notification.notification_type == 1 %}
                <div class="dropdown-item-parent">
                    <a href="#">@{{ notification.from_user }} liked your post</a>
                    <span class="dropdown-item-close">&times;</span>
                </div>
                {% elif notification.notification_type == 2 %}
                <div class="dropdown-item-parent">
                    <a href="#">@{{ notification.from_user }} commented on your post</a>
                    <span class="dropdown-item-close">&times;</span>
                </div>
                {% endif %}
            {% elif notification.comment %}
                {% if notification.notification_type == 1 %}
                <div class="dropdown-item-parent">
                    <a href="#">@{{ notification.from_user }} liked on your comment</a>
                    <span class="dropdown-item-close">&times;</span>
                </div>
                {% elif notification.notification_type == 2 %}
                <div class="dropdown-item-parent">
                    <a href="#">@{{ notification.from_user }} replied to your comment</a>
                    <span class="dropdown-item-close">&times;</span>
                </div>
                {% endif %}
            {% else %}
            <div class="dropdown-item-parent">
                <a href="#">@{{ notification.from_user }} has started following you</a>
                <span class="dropdown-item-close">&times;</span>
            </div>
            {% endif %}
            {% endfor %}
        </div>
    </div>

Как это должно выглядеть: Изображение 1. Что производит мой локалхост: Image 2

Дайте мне знать, если вам понадобится дополнительный код для решения проблемы :)

Вернуться на верх