Bootstrap table position adjustment
<p>I have managed to set the width of my table and the margin position to <code>margin-left:-240px;</code>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?</p>

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

<p>mystyle.css</p>

<pre><code>.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;
}
</code></pre>