ブートストラップテーブルの位置調整

Question

テーブルの幅と余白の位置をmargin-left:-240px;に設定しました。ウィンドウのサイズを変更するときに、テーブルをブートストラップ形式に設定することになっていました。しかし、ウィンドウのサイズを変更すると、テーブルの位置は少しずれているようです。ブートストラップ形式に影響を与えずに、テーブルをmargin-leftに設定するにはどうすればよいですか？

<div class="container"> 
     <div class="row"> 
      <div class="panel panel-primary filterable"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Hi there</h3> 
       </div> 
       <div class="table-responsive"> 
        <table class="table table-striped"> 
         <thead> 
          <tr class="filters"> 
            <th class="col-md-2"><input type="text" class="form-control" placeholder="Type" disabled></th> 
            <th class="col-md-2"><input type="text" class="form-control" placeholder="Course" disabled></th> 
            <th class="col-md-2"><input type="text" class="form-control" placeholder="Description" disabled></th> 
            <th class="col-md-1"><input type="text" class="form-control" placeholder="Credit" disabled></th> 
            <th class="col-md-2"><input type="text" class="form-control" placeholder="Hourly" disabled></th> 
            <th class="col-md-2"><input type="text" class="form-control" placeholder="Profile" disabled></th> 
            <th class="col-md-3"><input type="text" class="form-control" placeholder="Book" disabled></th> 
           </tr> 
         </thead> 
         <tbody> 
          <tr class="text-nowrap"> 
           <td>3/8/2015</td> 
           <td>1:15 PM</td> 
           <td>Field 7</td> 
           <td>Commingles</td> 
           <td>Jello Shot Jockeys</td> 
           <td>Jello Shot Jockeys</td> 
           <td>Jello Shot Jockeys</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 

mystyle.css

.filterable { 
    margin-top: 30px; 
    width:140%; 
    margin-left:-240px; 
} 
.filterable .panel-heading .pull-right { 
    margin-top: -90px; 
} 
.filterable .filters input[disabled] { 
    background-color: transparent; 
    border: none; 
    cursor: auto; 
    box-shadow: none; 
    padding: 0; 
    height: auto; 
} 
.filterable .filters input[disabled]::-webkit-input-placeholder { 
    color: black; 
} 
.filterable .filters input[disabled]::-moz-placeholder { 
    color: black; 
} 
.filterable .filters input[disabled]:-ms-input-placeholder { 
    color: black; 
} 

Answer 1

<div class="container-fluid"> 
    ---- navbar here ---- 
    <div class="row" style="top:100px"> 

    <!-- ----------- left margin ----------------- --> 
    <div class="col-md-2"></div> 

    <div class="col-md-10"> 
     --- Your table here --- 
    </div> 

    <!-- ----------- right margin ---------------- --> 
    <div class="col-md-2"></div> 
    </div> 
</div>