Bootstrap responsive table and buttons - html

Question

I am trying to make my table and buttons to be responsive but without success.
The buttons aren't fixed to the width when I decrease the size of the screen and the table below is set behind of this buttons and not below as it should be.
The search bar and buttons are supposed to be fixed below the navbar.
The system is like an admin system, where I display the logs from my other system (getting the data from MongoDB).
I am attaching screenshots and source code.
HTML-
<header>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">
<img src="./image/logoC.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-sign-in fa-fw"></i>Logins
</li>
<li><i class="fa fa-user-plus fa-fw"></i>Signup
</li>
<li><i class="fa fa-exclamation-circle fa-fw"></i>Add Items Errors
</li>
<li><i class="fa fa-retweet fa-fw"></i>Refresh Log
</li>
<li>Refresh Errors
</li>
<li>Bad Product
</li>
<li><i class="fa fa-refresh fa-fw"></i>Refresh All
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-sign-out fa-fw"></i>Logout</li>
</ul>
</div>
</div>
</div>
</header>
<div class="table_content">
<div class="row">
<div class="options">
<div class="col-sm-4">
<form class="searchBox">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i>
</div>
<input type="text" class="form-control" ng-model="searchLogins">
</div>
</div>
</form>
</div>
<div class="col-sm-8">
<ul class="pager" ng-show="currentPage==login">
<li>
<button id="markAsHandled" name="markAsHandled" class="btn btn-success" ng-click="handle()" value="Handle">Mark as Handled</button>
</li>
<li>
<button id="deleteError" name="deleteError" class="btn btn-danger" ng-click="remove()" value="Remove">Delete Errors</button>
</li>
<li>
<button id="select_all" name="deleteError" class="btn btn-info" ng-model="selectedAll" ng-click="checkAll()">Select All</button>
</li>
<li>
<button ng-click="removeLogs()" id="deleteAllErrors" name="deleteError" class="btn btn-danger">Remove All</button>
</li>
</ul>
<h5 id="statusMessage">{{statusMsg}}</h5>
</div>
</div>
</div>
</div>
<div class="tableAdmin">
<table ng-table="tableParams" class="table table-striped" show-filter="true">
<tr ng-repeat="log in $data| orderBy:sortType:sortReverse | filter : searchLogins">
<td data-title="'ID'">
{{log._id}}
</td>
<td data-title="'Data'">
{{log.logData}}
</td>
<td data-title="'Date'">
{{log.logDate}}
</td>
<td data-title="'Handled'">
<input type="checkbox" ng-model="log.selected" />
</td>
</tr>
</table>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="span9">
<p class="text-muted">Copyright © 2017 - Designed & Developed by me.</p>
</div>
</div>
</div>
</footer>
</div>
CSS-
html {
width: 100%;
height: 100%;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
background: #f9f9f9;
font-weight: 300;
font-size: 15px;
overflow: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
}
.btn {
font-weight: 400;
width: 100px;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
#markAsHandled {
width: 130px;
margin-right: 5px;
float: left;
}
#deleteError {
width: 110px;
margin-right: 5px;
float: left;
}
#select_all {
width: 110px;
margin-right: 15px;
float: left;
}
#deleteAllErrors {
width: 110px;
float: left;
}
#statusMessage {
float: left;
margin-left: 10px;
padding-top: 10px;
}
.table {
width: 80%;
height: 100%;
margin-top: 55px;
margin-left: 6px;
}
#ID_column {
width: 230px;
}
#user_column {
width: 230px;
}
#date_column {
width: 230px;
}
#handled_column {
width: 100px;
}
input[type="radio"],
input[type="checkbox"] {
line-height: normal;
margin-left: 50px;
}
.btn-success {
margin-left: 26px;
width: 100px;
}
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.ckbox {
position: relative;
}
.ckbox input[type="checkbox"] {
opacity: 0;
}
.table_content {
width: 100%;
margin-top: 66px;
}
td {
word-wrap: break-word;
overflow-wrap: break-word;
}
.searchBox {
float: left;
width: 400px;
margin: 10px 0 0 0;
}
/*Menu Options*/
.options {
float: left;
width: 100%;
height: 50px;
position: fixed;
display: block;
padding-left: 10px;
background-color: #f9f9f9;
z-index: 1000;
}
.pager {
float: left;
margin: 10px 0 0 10px;
}
.tableAdmin {
width: 100%;
padding-top: 20px;
padding-left: 50px;
}
.badgebox {
opacity: 0;
}
.badgebox + .badge {
text-indent: -999999px;
width: 27px;
}
.badgebox:focus + .badge {
box-shadow: inset 0px 0px 5px;
}
.badgebox:checked + .badge {
text-indent: 0;
}
#div1 {
height: 50px;
width: 100%;
margin-left: 35%;
}
footer {
padding: 50px 0;
height: auto;
text-align: center;
}
Thank you guys.

Answer 1

I've fixed this issue by decreasing the size of the search area and the size of the buttons.