title: Running into an issue trying to center 4 chart JS charts in a div
body: <p>I have a page with a sidepanel taking up <code>25%</code> with <code>float:left</code> side of the page, and a div with <code>float:right</code> taking up the other <code>75%</code>. In the right div, there are 4 ChartJS graphs in a 2 by 2 format. For reasons I can't seem to figure out, I can't get the Charts to either align in the center of the div, or get them to stretch out to use the entire div, and not just the left 70ish %. I've tried different floats, text-align, widths, padding and can't seem to get it right.</p>
  
  <pre><code>&lt;div class="dashboards"&gt;
      &lt;div id="chartsId" class="row"&gt;
          &lt;div class="col-sm-5"&gt;
              &lt;canvas width="200" height="200"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-5"&gt;
              &lt;canvas width="200" height="200"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-5"&gt;
              &lt;canvas width="200" height="200"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-5"&gt;
              &lt;canvas width="200" height="200"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .dashboards {
      margin: 0;
      border: 1px solid red;
      display: table;
      width: 100%;
      table-layout: fixed;
      text-align: center;
  }
  </code></pre>