CSS и Bootstrap работают только на одной html-странице, но не на другой

Я запустил свое приложение на Heroku, и, похоже, все работает как обычно, за исключением того, что дизайн (css) полностью работает только на странице home.html, но не на странице results.html. На странице results.html кажется, что только некоторые компоненты css работают, а другие нет. Я приложил фотографии различий в дизайне, а также код заголовка, где я связываю мои css и bootstrap. Я буду благодарен за любую помощь в выяснении того, почему моя страница results.html не полностью загружает файл css.

home.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- Drag and drop script -->
    <script src="{% static 'PRIIIME_Travel/js/drag_drop.js' %}"></script>

    <!-- Get value of ranking boxes script -->
    <script src="{% static 'PRIIIME_Travel/js/get_value.js' %}"></script>

    <!-- Meta tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">

    <link rel="icon" type="image/png" href="{% static 'logo/PRIIIME_Logo.png' %}" />

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!--- Include CSS -->
    <link rel="stylesheet" href="{% static 'PRIIIME_Travel/css/home.css' %}" type="text/css" />

    <title>Travel</title>
</head>

results.html

{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- Drag and drop script -->
    <script src="{% static 'PRIIIME_Travel/js/drag_drop.js' %}"></script>

    <!-- Get value of ranking boxes script -->
    <script src="{% static 'PRIIIME_Travel/js/get_value.js' %}"></script>

    <!-- Scroll page to results -->
    <script src="{% static 'PRIIIME_Travel/js/page_scroll.js' %}"></script>

    <!-- Meta tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">

    <link rel="icon" type="image/png" href="{% static 'logo/PRIIIME_Logo.png' %}" />

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!--- Include CSS -->
    <link rel="stylesheet" href="{% static 'PRIIIME_Travel/css/results.css' %}" type="text/css" />

    <title>Travel Results</title>
</head>
Вернуться на верх