uib-tabアライメントの問題

私はuib-tabsetを使ってタブを実装しました。タブの整列に問題があります。下の画像に見られるように、私の 'Current'タブは左にシフトしていて、 'Current'と 'Upcoming'の間に不快なスペースを残してカードから移動しています。両方のタブを完全にカードに合わせたいと思っています。方法はありますか？uib-tabアライメントの問題

私は多くの方法（特に.nav-タブ）が、運にCSSを変更しようとしています。

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>

私の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; 
}

出典

2016-10-05 Kunal badade