Bootstrap Responsiveness fails when using inline css

Question

I am working on a UI which involves use of bootstrap CSS. I am trying to create an HTML form using bootstrap. My code works perfectly when I don't resize my browser.As soon as I resize my browser, tr responsiveness fails. In the below snippet, I am using an inline css style for the label & textarea tags. So when I resize my browser, they don't align properly as other elements align using bootstrap's responsive feature.

Tried applying a couple of grid classes but still not working. Any idea as to how to fix this?

Screenshot:

Code Snippet:

 <!-- Form starting -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Project Details</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool"
                            data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->

                <!-- box body -->
                <div class="box-body" style="margin-left: 15px;">
                    <div class="row">
                        <form role="form" class="form-horizontal">

                            <!-- left side -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="inputProjectID" class="col-sm-3 control-label">
                                        Project ID</label>

                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="inputProjectID"
                                            placeholder="Project ID" tabindex="1">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputReleaseDate" class="col-sm-3 control-label">Release
                                        Date </label>

                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="datepicker"
                                            placeholder="Release Date (mm/dd/yyyy)" tabindex="3">
                                    </div>
                                </div>
                            </div>
                            <!-- left side ends -->

                            <!-- right side -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="inputProjectName" class="col-sm-3 control-label">Project
                                        Name</label>

                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="inputProjectName"
                                            placeholder="Project Name" tabindex="2  ">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputSupervisor" class="col-sm-3 control-label">Supervisor
                                    </label>

                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="inputSupervisor"
                                            placeholder="Supervisor" tabindex="4">
                                    </div>
                                </div>
                            </div>
                            <!-- right side ends -->

                            <!-- Form continues -->
                            <div class="col-md-12">
                                <div class="form-group">

                                    <label for="projectDesc" style="margin-left:-46px;"
                                        class="col-sm-2 control-label">Project Description</label>

                                    <div class="col-md-10 col-sm-8">
                                        <textarea style="resize: none;" class="form-control" rows="3" placeholder="Enter the Project Description" tabindex="5"></textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- /.form-group -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box body ends -->
            </div>
            <!-- /.box-primary ends -->

Answer 1

 <!-- Form starting -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Project Details</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool"
                            data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->

                <!-- box body -->
                <div class="box-body" style="margin-left: 15px;">
                    <div class="row">
                        <form role="form" class="form-horizontal">

                            <!-- left side -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="inputProjectID" class="col-sm-3 control-label">
                                        Project ID</label>

                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="inputProjectID"
                                            placeholder="Project ID" tabindex="1">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputReleaseDate" class="col-sm-3 control-label">Release
                                        Date </label>

                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="datepicker"
                                            placeholder="Release Date (mm/dd/yyyy)" tabindex="3">
                                    </div>
                                </div>
                            </div>
                            <!-- left side ends -->

                            <!-- right side -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="inputProjectName" class="col-sm-3 control-label">Project
                                        Name</label>

                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="inputProjectName"
                                            placeholder="Project Name" tabindex="2  ">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputSupervisor" class="col-sm-3 control-label">Supervisor
                                    </label>

                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="inputSupervisor"
                                            placeholder="Supervisor" tabindex="4">
                                    </div>
                                </div>
                            </div>
                            <!-- right side ends -->

                            <!-- Form continues -->
                            <div class="col-md-12">
                                <div class="form-group">

                                    <label for="projectDesc" style="@media(min-width:768px){margin-left:-46px;}"
                                        class="col-sm-2 control-label">Project Description</label>

                                    <div class="col-md-10 col-sm-8">
                                        <textarea style="resize: none;" class="form-control" rows="3" placeholder="Enter the Project Description" tabindex="5"></textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- /.form-group -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box body ends -->
            </div>
            <!-- /.box-primary ends -->