title: Card Positioning in IE 11 is different then Firefox
body: <p>I'am trying to build responsive website using Materialized framework. I am having issue where my card positioning is not correct in IE. However, It is working fine in Firefox. I am not sure where the problem is occuring. My assumption is something related to the margin I've set to Auto.</p>
  
  <p>I've tried to correct it in Style.CSS and Materialized.CSS in main {} and body {}. But still having issue. </p>
  
  <p>Container:</p>
  
  <pre><code>.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
    min-height: 100%;
  }
  </code></pre>
  
  <p>Structure:</p>
  
  <pre><code>&lt;main&gt;
  
    &lt;div class="container main-content"&gt;
  
      &lt;!-- Test Automation Cards --&gt;
  
  
      &lt;div class="col s12" style="padding-top: 40px;padding-bottom: 50px;text-align: center"&gt;
        &lt;p class="flow-text center"&gt;Design Tools&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="row" style="display: flex;flex-wrap: wrap;justify-content: center;"&gt;
  
  
        &lt;div class="col s12 m6 l4" style="flex: 20%; max-width: 30%;box-sizing: border-box;padding: 15px;"&gt;
          &lt;a href="http://agilehq/" target="_blank"&gt;
            &lt;div class="card waves-effect"&gt;
              &lt;div class="card-image"&gt;
                &lt;img src="img/agile.png"&gt;
                &lt;span class="card-title"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="card-content" style="text-align: center"&gt;
                &lt;p&gt;Search Design Documents&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="col s12 m6 l4" style="flex: 20%; max-width: 30%;box-sizing: border-box;padding: 15px;"&gt;
          &lt;a href="http://sharepoint/sites/wip/WorkInProgress/Forms/Project.aspx" target="_blank"&gt;
            &lt;div class="card waves-effect"&gt;
              &lt;div class="card-image"&gt;
                &lt;img src="img/folder.png"&gt;
                &lt;span class="card-title"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="card-content" style="text-align: center"&gt;
                &lt;p&gt;WIP ShareDrive&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="col s12 m6 l4" style="flex: 20%; max-width: 30%;box-sizing: border-box;padding: 15px;"&gt;
          &lt;a href="http://crdr/" target="_blank"&gt;
            &lt;div class="card waves-effect"&gt;
              &lt;div class="card-image"&gt;
                &lt;img src="img/tfs.jpg"&gt;
                &lt;span class="card-title"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="card-content" style="text-align: center"&gt;
                &lt;p&gt;CRDR&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/main&gt;
  </code></pre>
  
  <p>Main:</p>
  
  <pre><code>main {
    flex: 1 0 auto;
  }
  </code></pre>
  
  <p>Output is different in Firefox then IE. </p>
  
  <p>Check Both Screenshot <a href="https://imgur.com/a/d63pMNY" rel="nofollow noreferrer">Here</a>.</p>