title: I can't get my button to center in my div
body: <p>I know it's been asked dozen of times, but I'm stuck in my code and I don't understand why my code is not responding.</p>
  <p>I would like to center my button in a responsive way : it must center under 768px and have another reaction above. To get it in line is not a problem, but impossible to center it when the screen shrinks.</p>
  <p>Here's my code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media (max-width: 767px) {
    #callout {
      flex-wrap: wrap;
    }
    #calloutButton {
      text-align: center !important;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="m-portlet m-portlet--mobile m-portlet--body-progress-"&gt;
    &lt;div class="card card-custom gutter-b bg-diagonal bg-diagonal-light-primary"&gt;
      &lt;div class="card-body"&gt;
        &lt;div id="callout" class="d-flex align-items-center justify-content-between p-4 flex-xl-nowrap"&gt;
          &lt;div class="d-flex flex-column mr-5 font_18"&gt;
            &lt;a class="text-hover-primary mb-5" style="color: #002577"&gt;
              &lt;strong&gt;Accédez à la simulation complète&lt;/strong&gt;
            &lt;/a&gt;
            &lt;p class="text-dark" align="justify"&gt;
              Pour préparer votre rendez-vous et confirmer le prêt étudiant bancaire
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="calloutButton" class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0 justify-content-center"&gt;
            &lt;a href="{{ route('contrib_file', ['contributor_id'=&gt;$contributor-&gt;id]) }}" class="btn font-weight-bolder text-uppercase btn-primary py-4 px-6"&gt;
              &lt;img alt="download pdf" src='{{ asset("assets/images/pdf.png") }}' /&gt;&amp;nbsp&amp;nbsp
              &lt;strong&gt;Simulation&lt;/strong&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Where's my mistake ? what's the trick to obtain a nice button in the center of my card ? I'm quite new in the job, so sorry if it's a dummy question.</p>
  <p>Thanks for your help</p>