Issue with uib-tab alignment

Question

I have implemented tabs using uib-tabset. There is issue with alignment of tab. As you can see in below image, my 'Current' tab is shifted to left and it is moving out of card leaving uncomfortable space between 'Current' and 'Upcoming'. I want both tabs to aligned perfectly with card. Is there any way?

I have tried changing CSS in a lot of ways (.nav-tabs especially) but no luck.

HTML:

<div class="container">
      <div class="row"> 
      <div class="col-md-6 col-md-offset-3">
    <div class="card" style="margin-left:3%;margin-right:3%" ng-controller="AppointmentsCtrl">


        <uib-tabset active="active">
        <div class="row">
            <div class="col-xs-6 nav nav-tabs">
                <uib-tab index="0" heading="Current"> <!-- -->
                <ul class="list-group">
                    <li class="list-group-item">
                         <!-- <div id="accordion" role="tablist" aria-multiselectable="true"> -->
                            <div class="panel panel-default" style="border-color: white;">
                                <div class="panel-heading" role="tab" id="headingOne"
                                    style="background-color: #686868; margin-top: 5%;">
                                    <div class="row">
                                        <div class="col-xs-2">
                                            <div class="myimage">
                                                <img id="image" src="img/Calender.png"
                                                    style="width: 30px; height: 30px;"></img>
                                                <p id="text">26</p>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            <p class="panel-title" data-toggle="collapse"
                                                data-parent="#accordion"
                                                ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
                                                aria-controls="collapseOne"
                                                style="color: white; font-size: 15px">
                                                Monday, 26 Sep 2016<br> 02:00 PM
                                            </p>
                                        </div>
                                        <div class="col-xs-2">
                                            <a data-toggle="collapse" data-parent="#accordion"
                                                ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
                                                aria-controls="collapseOne"><img id="arrow"
                                                src="img/Down_Arrow.png" style="width: 30px; height: 30px;"></img></a>
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseOne" uib-collapse="isCollapsed"
                                    class="panel-collapse collapse" role="tabpanel"
                                    aria-labelledby="headingOne"
                                    style="background-color: #d5d5d5;">
                                    <div class="row">
                                        <div class="col-xs-6 col-sm-offset-1">
                                            <h5 style="color: #696969; margin-top: 5%;">Visitor
                                                Name</h5>
                                            <h5 style="color: #000; font-weight: bold;">Subodh
                                                Bagade</h5>
                                            <h5 style="color: #696969;">Purpose</h5>
                                            <h5 style="color: #000; font-weight: bold;">Sales
                                                Meeting</h5>
                                        </div>
                                        <div class="col-xs-6">
                                            <img src="img/Gray_User.png"
                                                style="margin-top: 10%; width: 110px; height: 100px;"></img>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <!-- <a ng-href="#/viewdetails/appointmentId={{appointment.appointmentId}}"> -->
                                            <a ng-href="#/viewdetails/appointmentId=1"> <img
                                                src="img/more.png" style="width: 30px; height: 30px;"></img>
                                            </a>
                                        </div>
                                        <div class="col-xs-4">
                                            <!-- <a ng-href="#/edit/appointmentId={{appointment.appointmentId}}"> -->
                                            <a ng-href="#/edit/appointmentId=1"> <img
                                                src="img/Edit_White.png" style="width: 30px; height: 30px;"></img>
                                            </a>
                                        </div>
                                        <div class="col-xs-4">
                                            <a ng-href="#" onClick="confirm('Are you sure?')"> <img
                                                src="img/Delete.png" style="width: 30px; height: 30px;"></img>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <!--    </div> -->
                    </li>


                </ul>
                <!-- --> </uib-tab>
            </div>


            <div class="col-xs-6 nav nav-tabs">
                <uib-tab index="1" heading="Upcoming">
                <p>Some text here.</p>
                </uib-tab>
            </div>
        </div>
        </uib-tabset>

    </div>
       </div>

     </div>  
</div>

A part of my CSS:

.nav-tabs {
border-bottom: 1px solid #ddd;
}

.nav-tabs>li {
/*   float: left;  */
margin-bottom: -1px;
background-color:#E9880A;
}

.nav-tabs>li>a {
margin-right: 2px;
line-height: 0.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}

Answer 1

this looks more like alignment issue. Once you align the tabs individually it should work fine. I was able to get it aligned by adjusting the tabs individually.