bootstrap text right-align not working

Question

I have a panel body as follows and i want to right align all labels-text. which i have done in right-label class but doesn't seem to work specially for Year control.

CSS

.form-inline.row{
    margin-top: 0px;
}

.form-inline label {
     /*text-align:right;*/
}
.form-group.row {
    margin-left: 0px;
}
.right-label {
    text-align:right;
}

MARKUP

         <div class="panel-body">
                <div class="form-inline row">
                    <div class="form-group col-md-4">
                        <div class="col-md-3 right-label">
                            @Html.Label("Year:")
                            </div>
                            <div class="col-md-9">
                                @Html.DropDownListFor(m => m.YearList, new SelectList(Model.YearList, "Value", "Text"))
                            </div>
                    </div>
                    <div class="form-group col-md-6">
                        <div class="col-md-4 right-label">
                            @Html.Label("Indicator Group:")
                        </div>
                            <div class="col-md-8">
                                @Html.DropDownListFor(m => m.IndicatorGroups, new SelectList(Model.IndicatorGroups, "Value", "Text"))
                            </div>
                     </div>

                </div>
                <div class="form-inline row">
                    <div class="form-group col-md-4">
                        <div class="col-md-3 right-label">
                            @Html.Label("Classes:")
                        </div>
                            <div class="col-md-9">
                                <select id="classList" multiple="multiple">
                                    <optgroup label="Grade 1">
                                        <option value="1">1 A</option>
                                        <option value="2">1 B</option>
                                    </optgroup>
                                    <optgroup label="Grade 2">
                                        <option value="3">2 A</option>
                                        <option value="4">2 B</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    <div class="form-group col-md-6">
                        <div class="col-md-4 right-label">
                            @Html.Label("Indicators:")
                        </div>
                            <div class="col-md-8">
                            <select id="indicatorList" multiple="multiple">
                                <optgroup label="General">
                                    <option value="1">Assissted Learning</option>
                                    <option value="2">ESL</option>
                                </optgroup>
                                <optgroup label="Allergies">
                                    <option value="3">Dairy</option>
                                    <option value="4">Eggs</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>    
                </div>
            </div>

SCRIPT

 jQuery(function ($) {
    $('#classList').multiselect({ enableClickableOptGroups: true });
    $('#indicatorList').multiselect({ enableClickableOptGroups: true });
 });

My Output here is:

Also can i remove the divs around labels in my code and still make them look the same - currently if i remove them they overlap with the text boxes