title: Unable to center the column in row
body: <p>I am placing a column inside a row which is inside a container. The column should be aligned centered and so the text. So far, text is center aligned but not the column.</p>
  
  <p>Here is the HTML &amp; CSS -</p>
  
  <p><b>HTML -</b></p>
  
  <pre><code>&lt;section id="raised-section" class="main main-raised"&gt;
          &lt;div class="container"&gt;
              &lt;div class="text-section text-center"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-8 pos-center"&gt;
                          &lt;h1 class="ft-roboto" style="font-weight: 800; color: #3C4858;"&gt;Sample Heading&lt;/h1&gt;
                          &lt;p class="ft-raleway" style="font-size: 1.15em; color: #999;"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p><b>CSS -</b></p>
  
  <pre><code>.main {
      background-color: #fff;
      position: relative;
      z-index: 3;
  }
  .main-raised {
      margin: -100px 30px;
      border-radius: 0.5em;
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                  0 6px 30px 5px rgba(0, 0, 0, 0.12),
                  0 8px 10px -5px rgba(0, 0, 0, 0.2); 
  }
  .text-section {
      padding: 70px 0;
  }
  .pos-center {
      margin-right: auto;
      margin-left: auto;
  }
  </code></pre>
  
  <p>Still no luck. Please help me out, I am missing something which is causing the <a href="https://i.stack.imgur.com/qt2q9.png" rel="nofollow noreferrer">alignment to be like this</a></p>