Layout error, scrolling left when there is line break

Question

I have in a part of a website, a selection of the hours. I’m just trying to get past the layout, and the guys thought it was a mistake and I’m not sure how to fix it.

Following example image, if you notice will notice that from the second line the boxes are shifting to the left, very little, but are.

I’m wearing bootstrap 3.0.0.

Follows the html

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div id="viewHours">
                <div class="btn-group">
                    <label class="btn btn-default">
                        <input type="radio" value="08:00" name="optHour" />08:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="08:30" name="optHour" />08:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="09:00" name="optHour" />09:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="09:30" name="optHour" />09:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="10:00" name="optHour" />10:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="10:30" name="optHour" />10:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="11:00" name="optHour" />11:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="11:30" name="optHour" />11:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="13:00" name="optHour" />13:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="13:30" name="optHour" />13:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="14:00" name="optHour" />14:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="14:30" name="optHour" />14:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="15:00" name="optHour" />15:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="15:30" name="optHour" />15:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="16:00" name="optHour" />16:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="16:30" name="optHour" />16:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="17:00" name="optHour" />17:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="17:30" name="optHour" />17:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="18:00" name="optHour" />18:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="18:30" name="optHour" />18:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="19:00" name="optHour" />19:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="19:30" name="optHour" />19:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="20:00" name="optHour" />20:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="20:30" name="optHour" />20:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="21:00" name="optHour" />21:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="21:30" name="optHour" />21:30</label>
                </div>
            </div>
        </div>    
    </div>
</div>

And I made a single change to css to remove the rounded edges, but that I’ve already removed and that’s not what’s giving the error:

#viewHours .btn-group>.btn {
    border-radius: 0
}

Following example in Jsfiddle

Answer 1

Place margin:0px in your class:

#viewHours .btn-group>.btn {
    border-radius: 0;
    margin:0;
} 

Jsfiddle

Answer 2

I tried using <table> here and it worked:

http://jsfiddle.net/WaqUj/1/

The only thing is that the number of items per line is fixed.