Issue with uib-tab alignment - html

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.