Horizontally center 3 divs of 3 cols - html

Question

I have a scenario where I need to center 3 divs of col3 in a row. When calculating, the answer shows 1.5, but what is the proper way of overcoming this challenge?
<div class="row">
<div class="col-md-offset-2 col-md-3" style="height: 50px; background-color: red">
</div>
<div class="col-md-3" style="height: 50px; background-color: green">
</div>
<div class="col-md-3" style="height: 50px; background-color: orange">
</div>
</div>
Here is a fiddle: https://jsfiddle.net/DTcHh/25558/
col-md-offset-2 is messing this up because it leaves col-1 for the other end. If there was col-md-offset-1.5 that would be brilliant but apparently no :(
I tried adding paddings and margins and it started becoming very messy, and thought I am directing to the wrong way.
What is the proper way of center the 3 divs without any hacky way?

Answer 1

I've come to a solution by erasing the offset class from the first inner div, assigning that particular .row container an additional class (.x in my example) and adding the following CSS for that class:
.x {
width: 100%;
margin: 0 12.5%;
}
Here is a codepen with the complete code: http://codepen.io/anon/pen/bwRZyJ

Answer 2

Try removing offset, and changing 3 for 4.
<div class="row">
<div class="col-xs-4" style="height: 50px; background-color: red">
</div>
<div class="col-xs-4" style="height: 50px; background-color: green">
</div>
<div class="col-xs-4" style="height: 50px; background-color: orange">
</div>
</div>
This puts 3 divs in a row, taking 33% of screen each one
UPDATE:
<div class="container">
<div class="row col-xs-10 col-xs-offset-1">
<div class="col-xs-3" style="height: 50px; background-color: red">
</div>
<div class="col-xs-3" style="height: 50px; background-color: green">
</div>
<div class="col-xs-3" style="height: 50px; background-color: orange">
</div>
</div><!--row-->
</div><!--container-->