Для
.row
задай
width: 100%;
или сколько тебе нужно там.
P.S.
ennam: Объясняю. Как рассчитывается margin в процентах? Правильно, проценты от ширины родителя. В твоем случае чему равна ширина .row? Правильно, ширине вложенных в него .col, без учета свойства margin-right: 10%, потому что брузер еще не знает из какого значения считать 10%.
Затем, когда уже известна ширина .col высчитывается процентный margin. А по скольку .col уже занял нужную ему ширину, то все .row не влезают в одну строку и переносятся на следующую.
Это все несложно посчитать, если для inline-block убрать лишние пробелы, которые им присущи.
codepen.io/anon/pen/epYaEG
Как видишь в данном примере ширина .row 150 пикселей, ширина .cal по 50px каждый. И margin-right уже после рассчета процентов равен 15 пикселям, что как раз и является десятью процентами от ширины .row