Карта-группа не по центру

Question

У меня есть 3 cards в card-group внутри div с классом col внутри div с классом row внутри div с классом container , cards не по центру.

Я пробовал justify-content-center в row div. Я пытался mx-auto в col div. Я даже попробовал старый план center html-тег в col, row, card-group div. Я в растерянности.

    <div style="position:relative;">
        <div class="animatedParent shrink" style="color:#ddd;background-color:#424242;text-align:center;padding:50px 80px;">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col">
                        <div class="card-group animatedParent mx-auto" data-sequence='250'>
                            <div class="card animated fadeIn slow rounded-0" style="max-width: 250px;" data-id='1'>
                                <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/justin.jpg" alt="Justin Worsham" data-id='2'>
                                <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
                                    Justin Worsham
                                </div>
                                <div class="card-body animated fadeIn slow" style="color:black;"  data-id='4'>
                                   <ul>
                                       <li>CEO</li>
                                       <li>Head Designer</li>
                                       <li>Head Developer</li>
                                       <li>Head Video Editor</li>
                                   </ul>
                                </div>
                            </div>
                            <div class="card animated fadeIn slow" style="max-width: 250px;" data-id='1'>
                                <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/daniel.jpg" alt="Daniel Crews" data-id='2'>
                                <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
                                    Daniel Crews
                                </div>
                                <div class="card-body animated fadeIn slow" style="color:black;"  data-id='4'>
                                   <ul>
                                       <li>CFO</li>
                                       <li>Designer</li>
                                       <li>Developer</li>
                                       <li>Video Editor</li>
                                   </ul>
                                </div>
                            </div>
                            <div class="card animated fadeIn slow rounded-0" style="max-width: 250px;" data-id='1'>
                                <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/julian.jpg" alt="Julian Ellis" data-id='2'>
                                <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
                                    Julian Ellis
                                </div>
                                <div class="card-body animated fadeIn slow" style="color:black;"  data-id='4'>
                                   <ul>
                                       <li>Jr Developer</li>
                                       <li>Server Side Code</li>
                                       <li>Intern Specialist</li>
                                       <li>Back-end Developer</li>
                                   </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Добавить mx-auto класс с card вместо card-group.

<div class="card-group animatedParent" data-sequence='250'>
  <div class="card animated fadeIn slow rounded-0 mx-auto" style="max-width: 250px;" data-id='1'>
    <img class="card-img-top animated fadeIn slow rounded-circle" src="/images/justin.jpg" alt="Justin Worsham" data-id='2'>
    <div class="card-header animated fadeIn slow" style="color:black; font-weight:bold;" data-id='3'>
      Justin Worsham
    </div>
    <div class="card-body animated fadeIn slow" style="color:black;" data-id='4'>
      <ul>
        <li>CEO</li>
        <li>Head Designer</li>
        <li>Head Developer</li>
        <li>Head Video Editor</li>
      </ul>
    </div>
  </div>
</div>