Fixing the positions of dropdown and checkbox (Horizontal View)

I am trying to create a form that has checkbox and dropdown elements side by side in a horizontal manner. I am using Bootstrap templates for this. The form is as shown below:

The problem is that I cannot seem to fix the styling of the dropdown. So I want the entire H:M--H:M to have the same distance from the right border of the form, because now they are dependent on the length of the weekdays. The code that I have used is as shown below:

<div class="form widget widget-medium">
    <div class="widget-header title-only">
        <h2 class="widget-title">Opening dates and hours of the store</h2>
    </div>
    <form method="POST" class="form-inline">

        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="Monday">
            <label class="form-check-label" for="Monday">Monday</label>

            <div class="form-group" style="padding-left:8px; padding-top:10px;>
                <select name="Hours" id="c1" class="form-control circle-select">
                    <option value=""> Hour </option>
                    <option value="D0">00</option>
                    <option value="D1">01</option>
                    <option value="D2">02</option>  
                  </select>
            </div>
            <span class="label label-default" style="padding-top: 10px;">:</span>
            <div class="form-group" style="padding-top: 10px;">
                <select name="Minutes" id="c2" class="form-control circle-select">
                    <option value=""> Min </option>
                    <option value="D0">00</option>
                    <option value="D1">01</option>
                </select>
            </div>

            <span class="label label-default" style="padding-top: 10px;">--</span>


            <div class="form-group" style="padding-top: 10px;">
                <select name="Hours" id="c1" class="form-control circle-select">
                    <option value=""> Hour </option>
                    <option value="D0">00</option>
                    <option value="D23">23</option>
                </select>
            </div>
            <span class="label label-default" style="padding-top: 10px;">:</span>

            <div class="form-group" style="padding-top: 10px;">
                <select name="Minutes" id="c2" class="form-control circle-select">
                    <option value=""> Min </option>
                    <option value="D0">00</option>
                    <option value="D59">59</option>
                </select>
            </div>
        </div>

        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="Tuesday">
            <label class="form-check-label" for="Tuesday">Tuesday</label>
...The rest are the same

The css code of the checkbox is:

 input[type=checkbox] {
        width: $base-spacing*1.5;
        height: $base-spacing*1.5;
    }

May anyone know how it can be fixed?

Thank you in advance!