Why does the first record align fine and the second not?

Question

Django

The first entry is displayed exactly, the second entry is displayed crooked for some reason
CSS - Bootstrap 4


Code:

{% for el in news %}
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
  <div class="col">
    <div class="card shadow-sm">
      <img src="{{ el.images }}" alt="a red circle" height="225px" width="100%"/>
      </svg>
      <div class="card-body">
        <p class="card-text">{{ el.anons }}</p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="btn-group">
            <a href="{{ el.text }}"<button type="button" class="btn btn-sm btn-outline-secondary">Дополнительно</button>
            <a href="{{ el.link }}"<button type="button" class="btn btn-sm btn-outline-secondary">Скачать</button></a>
          </div>
          <small class="text-muted">{{ el.date }}</small>
        </div>
      </div>
    </div>
  </div>
{% endfor %}

In theory, all entries should follow the above given HTML code.

Answer 1

Yeah, in theory, set the image width to a fixed or max-width. And not tags, but preferably CSS

Answer 2

Most likely just the width of the container is smaller than required