Почему заголовок моей Boostrap-карты не заполняет всю ширину карты?

Я новичок в Bootstrap и Django. Я пытаюсь стилизовать карточку, но заголовок карточки (фон) не заполняет всю ширину карточки. Вот пример:

Вот код:

<div class="container">
  <div class="grid">
    <div class="row">
      {% for list, content in content.items %}

  <div class="card col-md-6 shadow-lg">
    <a href="{{user_name}}/{{list}}">
      <div class="card-header bg-secondary text-white">{{list}}</div>
      <div class="card-body">
        <ul>
          {% for row in content %}
          <li>{{row}}</li>
              {% endfor %}
            </ul>
          </div>
        </a>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<div class="card px-0">
  <h4 class="card-header">
    Card Header
  </h4>  <!-- card-header -->
  <div class="card-body">
    Card Body
  </div>  <!-- card-body -->
</div>  <!-- card -->