Margin-top для индикатора карусели не работает bootstrap

Я сделал карусель с бутстрапом 4, как показано ниже:

{% if events %}
<div class = "text-center my-3">

  <h3 class = "font-weight-bold pb-4 mb-0 text-center">Events</h3>

  <div class = "carousel slide my-4" data-interval = "false" id = "carousel-1">

    <div class = "carousel-inner">

      {% for item in events %}
        <div
            {% if forloop.counter0 == 0 %}
              class = "carousel-item active  "
            {% else %}
              class = "carousel-item  "
            {% endif %}>

            <div class = "row">
              <div class = "col-xs-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 ml-auto">

                <div class = "text-right  ">

                  <a class = "text-dark"  href = "{% url 'events' %}">

                    <div>

                      <h3 class = "text-dark" >{{ item.title }}</h3>
                      <p class = "text-dark" style = "color: #F4F4F4;" > {{item.date}} </p>
                      <p class = "text-dark" > {{item.description|safe}} </p>

                    </div>

                  </a>
                </div>

              </div>

              <div class = "col-xs-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 mr-auto">
                <img class = "img-fluid text-center"  style = "max-height: 25vh;" src = "{{ item.cover.url }}" alt = "image cap">
              </div>
            </div>


        </div>
      {% endfor %}

    </div>

    <div>
      <a class = "carousel-control-prev" href = "#carousel-1" role = "button" data-slide = "prev">
        <span class = "carousel-control-prev-icon" aria-hidden = "true"><i class = "text-dark fas fa-chevron-left"></i></span>
        <span class = "sr-only">Previous</span>
      </a>
      <a class = "carousel-control-next" href = "#carousel-1" role = "button" data-slide = "next">
            <span class = "carousel-control-next-icon" aria-hidden = "true"><i class = "text-dark fas fa-chevron-right"></i></span>
            <span class = "sr-only">Next</span>
      </a>
    </div>

    <ol class = "carousel-indicators">
        {% for item in events %}
        <li data-target = "#carousel-1" data-slide-to = "{{ forloop.counter0 }}"
          {% if forloop.counter0 == 0 %}
            class = "active text-dark"
          {% else %}
            class = "text-dark"
          {% endif %}
        ></li>
        {% endfor%}
    </ol>

  </div>

</div>
{% endif %}

Я хочу, чтобы у индикатора карусели было верхнее поле, чтобы он не перекрывал контент. так как я не показываю изображения, индикаторы не подходят, если они накладываются на контент. я добавил

<style>
.carousel-indicators{
    margin-top: 50px;
  }
</style>

Но это не работает.

Я также пытался добавить margin-top в bootstrap.min.css, но это тоже не сработало.

Любые идеи?