title: mx-auto not moving element to centre
body: <p>In following code, the text <code>hello world</code> is not moving to centre of the screen using <code>mx-auto</code>.  What is the problem?</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
          &lt;div class="row "&gt; 
              &lt;div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 my-border" &gt;
                  &lt;div class="alert alert-success mx-auto" &gt;
                      Hello World
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/div&gt;       
  </code></pre>