Table cell width fix

Table grid cell width calculation is incorrect.

__SASS__:

    .table {
      @include outer-container;
    }

    .table-row-12 {
      @include span-columns(12);
      @include row(table);
      background-color: red;
    }

    .table-cell-3 {
       @include span-columns(3);
       background-color: #eee;
    }

__HTML__:

    ...
    <div class="table">
      <div class="table-row-12">
        <div class="table-cell-3">3</div>
        <div class="table-cell-3">3</div>
        <div class="table-cell-3">3</div>
        <div class="table-cell-3">3</div>
      </div>
    </div>
    ...

__Output CSS__:

    .table {
      *zoom: 1;
      max-width: 68em;
      margin-left: auto;
      margin-right: auto; }
      .table:before, .table:after {
        content: " ";
        display: table; }
      .table:after {
        clear: both; }

    .table-row-12 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 100%;
      *zoom: 1;
      display: table;
      width: 100%;
      table-layout: fixed;
      background-color: red; }
      .table-row-12:last-child {
        margin-right: 0; }
      .table-row-12:before, .table-row-12:after {
        content: " ";
        display: table; }
      .table-row-12:after {
        clear: both; }

    .table-cell-3 {
      display: table-cell;
      padding-right: 1.57177%;
      width: 24.80353%;
      background-color: #eee; }


24.80353% (table-cell-3 width) * 4 < 100%.

Result screenshot: https://www.monosnap.com/image/u3oLf7IEDrom8reHFF4nzqpTPFeOv9