cannot center table in firefox
<p>So I have these two tables</p>
<pre><code>    &lt;table  id=&quot;pointsTable&quot; &gt;
          &lt;th&gt; One &lt;/th&gt;                                           
          &lt;th&gt; Two &lt;/th&gt;                               
          &lt;th&gt; Three &lt;/th&gt;
          &lt;tr&gt;
           &lt;td  id=&quot;one&quot; &gt;&lt;/td&gt;               
           &lt;td  id=&quot;two&quot;&gt;&lt;/td&gt;              
           &lt;td  id=&quot;three&quot;&gt;&lt;/td&gt;                            
          &lt;/tr&gt;
    &lt;/table&gt;                                                                            
            
   &lt;table id=&quot;pointsTableSmall&quot; style=&quot;text-align: center;&quot;&gt;
          &lt;tr&gt;
             &lt;th&gt; One &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td  id=&quot;one&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;th&gt;Two &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td  id=&quot;two&quot; &gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;th&gt;Three&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td  id=&quot;three&quot; &gt;&lt;/td&gt;
          &lt;/tr&gt;
   &lt;/table&gt;
</code></pre>
<p>The first is visible in large screens and the second one, the smaller, is visible in smaller screens.</p>
<p>Their css is</p>
<pre><code>#pointsTable, #pointsTableSmall{
    border: 0;
    border-style: 0;   
    margin: auto !important;
    padding: auto;
    text-align: center !important;    
        
} 
</code></pre>
<p>Their wrap div has</p>
<pre><code>#pointWrap{
    text-align: center;
} 
</code></pre>
<p>In Firefox 45.0.1 the table is aligned left , has margin : auto and no padding                                                                                                                            . There is a gap in the right side between the left aligned-gap an its container <code>div</code>.</p>
<p>I cannot center that <code>pointsTableSmall</code> table. How can I fix this?</p>
<p>Thanks</p>
<p><strong>Update</strong></p>
<p>Now, the table is</p>
<pre><code>            &lt;div class=&quot;container center-block&quot; id=&quot;pointsTableSmallWrap&quot;&gt;
                &lt;table id=&quot;pointsTableSmall&quot; align=&quot;center&quot; class=&quot;center-block&quot;&gt;
                    &lt;tr&gt;
                      &lt;th&gt;Hey &lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                      &lt;td class=&quot;heyT&quot;, id=&quot;heyTS&quot;&gt; more hey&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                      &lt;th&gt;Hi&lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                      &lt;td class=&quot;hiA&quot; id=&quot;hiAS&quot; &gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                      &lt;th&gt;Yo&lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                      &lt;td class=&quot;yoU&quot; id=&quot;yoUS&quot; &gt;&lt;/td&gt;
                    &lt;/tr&gt;
               &lt;/table&gt; 
           &lt;/div&gt;
</code></pre>
<p>Each <code>&lt;td&gt;</code> has graphics from the <a href="http://kimmobrunfeldt.github.io/progressbar.js/" rel="noreferrer">progressbar.js</a> library.</p>
<p>The css is</p>
<pre><code>#pointsTableSmall{
    display: none;
    text-align: center !important;      
    align-self: center; 
    alignment-adjust: central; 
    align-content: center;
    align : center;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    margin-left: 1%;
    margin-right: 1%;
}

#pointsTableSmallWrap{
    align-content: center;
    align-self: center;
    align-items: center;
    text-align: center;
    align :center;
    margin: 0 auto;
    width: 100%;
}

#pointsTableSmall &gt; tbody, #pointsTableSmall &gt; tbody &gt; tr{
    align-content: center;
    align-self: center;
    align-items: center;
    text-align: center;
    align :center;
    margin: 0 auto;
    width: 100%;
    margin-left: 1%;
    margin-right: 1%;
}
</code></pre>
<p><em>The problem</em></p>
<p>In Firefox the table always sits on the left (check image to help you). I dont know how to center it. I tried</p>
<blockquote>
<p>I replaced table with bootstrap <code>div class=&quot;col-md-4&quot;</code> but they go one under the other even in medium screen sizes and look ugly</p>
<p>I replaced table with flexbox that is awesome in small screens , but again in medium screens they dont stick one net to the other and look ugly</p>
<p>I tried adding <code>margin-left</code>, <code>margin-right</code> on the tables and the wrap , but nothing.</p>
</blockquote>
<p>Please help me center this table</p>
<p>Thanks</p>
<p><a href="https://i.stack.imgur.com/4J3Z9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4J3Z9.png" alt="enter image description here" /></a></p>