How to substract the percentage of divs with margins so they perfectly fit their parent?

Question

With this HTML/CSS:

HTML:

  <div class="row">
    <div class="col-6">
    </div>
    <div class="col-6">
    </div>
  </div>

CSS/STYLUS:

.row {
  max-width: 1230px
  margin: 0 auto
  width: 100%
}

.col-6 {
  margin: 5px
  float: left
  width: 50% - 10px
}

I expected the .col-6 divs to fit perfectly their parent .row. But I was wrong:

What's the correct way to make the .col-6 divs fit perfectly .row (horizontally)?

Answer 1

Try using calc();

width: calc(50% - 10px);