Не могу прибить футер к низу

Question

Это основной код, иногда не хватает контента на стринице и футер начинает лезть наверх
<!--Это навигационная панель-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="{% url 'home-page' %}">It-Ground</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{% url 'items-page' %}">Товары</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Категории
            </a>


            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

              {% if cat_selected == 0 %}
                  <li class="selected"><a class="dropdown-item" href="{% url 'items-page' %}">Все категории</a></li>
                  {% else %}
                  <li class="selected"><a class="dropdown-item" href="{% url 'items-page' %}">Все категории</a></li>
              {% endif %}

                {% for c in cats %}
                    {% if c.pk == cat_selected %}
                    <li class="selected"><a class="dropdown-item">{{ c.name }}</a></li>
                  {% else %}
                    <li><a class="dropdown-item" href="{{ c.get_absolute_url }}">{{ c.name }}</a></li>
                    {% endif %}
                {% endfor %}

            </ul>

          </li>
        </ul> 

        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <div class="search">
            <form action="{% url 'home-page' %}" style="margin-left: auto;" class="d-flex" method="get">
              <input class="form-control me-2" name="q" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
          <!-- логика для входа и выхода на главной странице -->
            <li class="nav-item">
              <a class="nav-link active dropdown-toggle"  data-bs-toggle="dropdown" aria-current="page" href="#"><i class="fa-solid fa-user"></i></a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="{% url 'account_login' %}">Вход</a></li>
                <li><a class="dropdown-item" href="{% url 'account_logout' %}">Выход</a></li>
                <li><a class="dropdown-item" href="{% url 'account_signup'%}">Регстрация</a></li>
              </ul>
            </li>
          <!-- конец логики для иконки юзер -->
            <li class="nav-item dropdown">
              <a class="nav-link active" aria-current="page" href="{% url 'summary-page' %}"><span class="badge red z-depth-1 mr-1"></span><i class="fa-solid fa-cart-shopping"></i><span class="clearfix d-none d-sm-inline-block"></span></a>
            </li>
          </ul> 
          <p class="total-cart" style="
          color:#fff;
          width: 20px;
          height: 25px;
          border-radius: 50%;
          font-size: 14px;">{{ request.user|cart_item_count }}</p>
      </div>
    </div>
  </nav>




  {% block content %}
  {% endblock content %}

          <!-- Начало футера -->
  <footer>
    <section class="footer">
      <div class="container">
        <div class="row">
          <!-- Информация о сайте в футере -->
          <div class="col-md-3 col-6">
            <h4>Информация</h4>
            <ul class="list-unstyled">
              <li><a href="#">Главная</a></li>
              <li><a href="#">О магазине</a></li>
              <li><a href="#">Оплата и доставка</a></li>
              <li><a href="#">Контакты</a></li>
            </ul>
          </div>
          <!-- Часы работы -->
          <div class="col-md-3 col-6">
            <h4>Working hours</h4>
            <ul class="list-unstyled">
              <li>city Moscow, street Pushkina, 2</li>
              <li>monday-sunday: 24/7</li>
            </ul>
          </div>
          <!-- Контакты -->
          <div class="col-md-3 col-6">
            <h4>Contacts</h4>
            <ul class="list-unstyled">
              <li><a href="tel: +7894567891">+7(894)-456-47-91</a></li>
              <li><a href="tel: +7894567892">+7(894)-456-47-92</a></li>
              <li><a href="tel: +7894567893">+7(894)-456-47-93</a></li>
            </ul>
          </div>
          <!-- Социальные сети -->
          <div class="col-md-3 col-6">
            <h4>Social Networks</h4>
            <div class="footer-icon">
              <a href="vk.com"><i class="fa-brands fa-vk"></i></a>
              <a href="instagram.org"><i class="fa-brands fa-instagram"></i></a>
              <a href="telegram.com"><i class="fa-brands fa-telegram"></i></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </footer>

Код CSS

    /* footer */
    .footer {
        background-color: #666;
        position: fixed;
        flex: 0 0 auto;
    }

    .footer h4 {
        color: #ccc;
        text-transform: uppercase;
        font-size: 16px;
        border-bottom: 1px solid #666;
        padding-bottom: 3px;
    }

    .footer a {
        text-decoration: none;
        transition: all .3s;
    }

    .footer a:hover {
        color: #fff;
        text-decoration: underline;

    }

    .footer a, .footer li {
        color: #c8c8c8;

    }

    .footer-icons a {
        display: inline-block;
        margin-right: 15px; 
        font-size: 20px;
    }

    .button.btn.btn-dark {
        background-color: #db0e0e;
    }

    html {
        font-size: 18px; /*размер шрифта для заголовка*/
    }

    body {
        font-family: 'Roboto', sans-serif; /*шрифт*/
        font-size: 16;
        font-weight: 400;   /*насыщенность шрифта*/
        color: #000;
        background-color: #fff;
        min-width: 320px;   /*минимальная ширина блоков*/
    }