title: How do I center an element on large display using materialize?
body: <p>I am using Materialize CSS and I'm trying to center a div. I'm trying to get the white boxes to center on mobile and desktop to the center of the page. All the white boxes are in the same div called <code>root</code>. </p>
  
  <p>index.html</p>
  
  <pre><code> &lt;body&gt;
      &lt;div class="container"&gt;
  
         &lt;div id="mainContent" class="row"&gt;
  
            &lt;div id="root" class="col s12 xl l6"&gt;&lt;/div&gt;
  
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>styles.css</p>
  
  <pre><code>#mainContent {
      background-color: blue;
      margin: auto;
      display: block;
  }
  
  #root {
      margin: 0 auto;
      position: relative;
  }
  </code></pre>
  
  <p>On mobile, it centers the white boxes correctly.
  <a href="https://i.stack.imgur.com/DU9II.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DU9II.png" alt="On mobile, it centers the white boxes correctly."></a></p>
  
  <p>On desktop the boxes are on the left side.
  <a href="https://i.stack.imgur.com/dPLFh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dPLFh.png" alt="Desktop view"></a></p>
  
  <p>If I add <code>margin-left</code> to <code>.root{}</code> then it's not centered on the mobile version. </p>