Bootstrap container-fluid - disable margin - html

Question

This is a problem , that I have: http://i.stack.imgur.com/i80Yl.jpg .
This is a part of Bootstrap menu.
Some more informations have been added
Header
<link rel="stylesheet" type="text/css" href="view/stylesheet/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="view/stylesheet/bootstrap.css" />
But when i want to overwrite any Bootstrap options i need to use !important. I dont want to change Bootstrap css.
HTML
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://localhost/Web/E-Shop/admin/index.php?route=common/home&token=dac2fdfed5ea52154c40dd0ad17dbe92">Obchod</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Catalog<b class="caret"></b>
<ul class="dropdown-menu">
<li> Categories</li>
<li>Products</li>
<li>Filters</li>
<li>Profiles</li>
<li class="divider"></li>
<li>Attributes</li>
<li>Attribute Groups</li>
<li class="divider"></li>
<li>Options</li>
<li>Manufacturers</li>
<li>Downloads</li>
<li>Reviews</li>
<li>Information</li>
</ul>
</li>
<li class="dropdown">
Extensions<b class="caret"></b>
<ul class="dropdown-menu">
<li>Modules</li>
<li>Shipping</li>
<li>Payments</li>
<li>Order Totals</li>
<li>Product Feeds</li>
</ul>
</li>
<li class="dropdown">
Sales<b class="caret"></b>
<ul class="dropdown-menu">
<li>Orders</li>
<li>Recurring Profiles</li>
<li>Returns</li>
<li class="divider"></li>
<li>Customers</li>
<li>Customer Groups</li>
<li>Banned IP</li>
<li class="divider"></li>
<li>Affiliates</li>
<li>Coupons</li>
<li class="divider"></li>
<li>Gift Vouchers</li>
<li>Voucher Themes</li>
<li class="divider"></li>
<li>Mail</li>
</ul>
</li>
<li class="dropdown">
System<b class="caret"></b>
<ul class="dropdown-menu">
<li>Settings</li>
<li class="divider"></li>
<li>Layouts</li>
<li>Banners</li>
<li class="divider"></li>
<li>Users</li>
<li>User Groups</li>
</ul>
</li>
<li class="dropdown">
Localisation<b class="caret"></b>
<ul class="dropdown-menu">
<li>Languages</li>
<li>Currencies</li>
<li>Stock Statuses</li>
<li>Order Statuses</li>
<li class="divider"></li>
<li>Return Statuses</li>
<li>Return Actions</li>
<li class="divider"></li>
<li>Countries</li>
<li>Zones</li>
<li>Geo Zones</li>
<li class="divider"></li>
<li>Tax Classes</li>
<li>Tax Rates</li>
<li class="divider"></li>
<li>Length Classes</li>
<li>Weight Classes</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Error Logs</li>
<li>Backup / Restore</li>
</ul>
</div><!--/.nav-collapse -->
</div>
CSS
.navbar-default {
background-color: #00598e !important;
border-color: none !important;
color: #fff !important;
}
.navbar-default .navbar-nav > li > a {
color: #fff !important;
}
.navbar-default .navbar-brand {
color: #FFF !important;
}
.dropdown .open{
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown:hover {
background-color: #0077c0;
}
.vertical-offset-100{
padding-top:100px;
}
.footer-s{
position:fixed;
left:0px;
bottom:0px;
width:100%;
}
.alert{
margin-top: 30px;
}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
background-color: #00598e;
border-color: #00598e;
}
.dropdown-menu>li>ul>li>a:hover, .dropdown-menu>li>ul>li>a:focus{
text-decoration: none;
color: #262626;
background-color: #F5F5F5;
}
.container{
margin-top: 50px;
}
.btn>a:hover,
.btn>a:focus,
.btn>a {
color: #fff;
text-decoration: none;
}
.scrollbox{
height: 120px;
width: auto;
border: 1px solid #ccc;
overflow: auto;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #FFF;
background-color: #0077c0 !important;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #FFF !important;
}

Answer 1

I suggest you move your override or custom stylesheet below (after) the boostrap CSS file. Then, you shouldn't need to use !important as much or ever. Just remember that you'll need to match or exceed the same specificity in your custom stylesheet to make overrides.
<link rel="stylesheet" type="text/css" href="view/stylesheet/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="view/stylesheet/stylesheet.css" /> <!-- moved below bootstrap.css -->