Bootstrap table position adjustment - html

Question

I have managed to set the width of my table and the margin position to margin-left:-240px;I was supposed to set the table in bootstrap format when i resize my window. However, when I resize my window, the table position seems to be a little off from its position. How can I set the table to margin-left without affecting the bootstrap format?
<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>