Почему при {% extends %} какого то файла все стили слетают HTML Django Bootstrap 5

Коды:

index.html:

{% extends 'base.html' %}
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sky Studio</title>
    {% load static %}
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' type='image/x-icon' %}">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body style="background-color: white">
      {% block content %}
        <div class="container">
            <h1>Hello, world!</h1>
        </div>
        <br/>

      {% endblock %}
</body>
</html>

base.html:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top" id="nav_reg">
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top" id="nav_reg">
    <div class="container-fluid">
    <a class="navbar-brand" href="/">
      <img src="{% static 'images/favicon.ico' type='image/x-icon' %}" width="30" height="30" class="d-inline-block align-top" alt="">
      <span style="color: white">Company</span>
    </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="/subscriptions">Subscriptions</a></li>
          </ul>
        </li>
      </ul>

      </div>
    </div>
  </nav>
  </div>
</nav>

{% endif %}

{% block content %}
{% endblock %}

<div class="container" style="text-align:  center; margin-bottom: 23px;" id="copy">
    <hr class="my-4">
<h5>&copy; Company 2022</h5>
</div>
Вернуться на верх