Bootstrap Heading Background Color

When overflow-x triggered the panel-primary background color doesn't go along for the ride.

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row form-group">
  <div class="panel panel-primary">
    <div id="hpanel" class="panel-heading">Heading</div>
    <div class="panel-body">
    <div class="table-responsive">
      <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
            <th>Col6</th>
            <th>Col7</th>
            <th>Col8</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>some data</td>
           <td>some data</td>
           <td>some data</td>
           <td>some data</td>
           <td>some data</td>
           <td>some data</td>
           <td>some data</td>
           <td>some data</td>
       
         </tr>
         <tr>
           <td>other data</td>
           <td>other data</td>
           <td>other data</td>
           <td>other data</td>
           <td>other data</td>
           <td>other data</td>
           <td>other data</td>
           <td>other data</td>
       
         </tr>
        </tbody>
      </table>
      </div><!-- table-responsive -->
    </div>
  </div>
</div>

CSS

.panel-primary {
    max-width: 100%;
    overflow-x:scroll;
    white-space: nowrap;
    
  }
 
 table.dataTable tbody tr.selected {
  background-color: #B0BED9 !important;
}

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable( {
    		
    } );
} );