title: margin: 0 auto is not working on bootstrap
body: <p>Here is my code:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
          &lt;div class="carousel slide" data-ride = "carousel" style="position: relative"&gt;
              &lt;div class="carousel-inner" role="listbox"&gt;
                   &lt;div class="item active"&gt;
                   &lt;img src="images/slide-1.jpg"&gt;
                   &lt;/div&gt;
                   &lt;div class="item"&gt;
                   &lt;img src="images/slide-2.jpg"&gt;
                   &lt;/div&gt;
                   &lt;div class="item"&gt;
                   &lt;img src="images/slide-3.jpg"&gt;
                   &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container" style="background-color:#fff; top: 50px; margin: 0 auto;"&gt;
              &lt;h1&gt;Hello&lt;/h1&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the output:</p>
  
  <p><a href="https://i.stack.imgur.com/wtB3E.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wtB3E.jpg" alt=""></a></p>
  
  <p>The problem is "container" div is not centering. I know the "position: absolute" is the main trouble maker but how can i position the div without "position: absolute"?  What is the solution? </p>