Почему CSS-стили в Джанго-проекте отображаются частично?

Пытаюсь создать фиксированную область для изображений, но CSS не работает. Смотрел и в Сафари и в Хроме.

HTML (base)

<link rel="stylesheet" href="images/custom.css">

HTML (слайдер)

{% extends 'main/base.html' %}
{% block content %}
        
<div class="container-fluid my-carousel">
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          {% for photo in photos %}
          <div class="carousel-item {% if forloop.first %}active{% endif %}">
            <div class="figure">
              <img src="{{ photo.image.url }}" class="d-block w-100" alt=" " />
            </div>
          </div>
          {% endfor %}
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

СSS

.figure {
  width: 1000px;
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
   }

.figure img {
    max-width: 100%;
    max-height: 100%;
   }

При этом в другом слайдере на той же ХТМЛ-странице все работает!! Вот работающий код:

HTML

 <div class="jumbotron">
    <div class="row">
      {% for photo in photos %}
      <div class="col-md-3">
        <div class="image-container">
          <a href="{{ photo.image.url }}" target="_blank">
            <img src="{{ photo.image.url }}" class="d-block w-100" alt="" />
          </a>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

CSS

.image-container {
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
}