Columns with same height and a background color with Bootstrap

I try to have two columns in bootstrap with the same height. This is ok, it works. But now I try to have background color for these columns. It works, but I can't keep white margins between them. In blue the space I need in white. :/

I have this code (with bootstrap 3)

@media only screen and (min-width : 768px) {
  .is-table-row {
    display: table;
  }
  .is-table-row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
  }
}
.red {
  background: red;
}
.green {
  background: #343335;
}

<div class="row is-table-row">
  <div class="col-md-8 red"> text </div>
  <div class="col-md-4 green"> text </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Can you help me please ?