responsive navbar with bootstrap 3 - css

Question

When viewed on mobile devices I would like my navbar not to collapse, but stay as in the original desktop website. I have achieved this by overwriting the CSS in a media screen (code below). I would like, however, the navbar to stretch across the whole width, and this I cannot achieve.
I tried changing background-color of navbar-default to black, but it adds some margin which I can't seem to remove.
#media screen
and (min-width: 320px)
and (max-width: 767px)
and (orientation: landscape) {
body{
margin: 0 auto;
background-image: url(../images/background_vm.jpg);
/*background-repeat:no-repeat;*/
background-attachment: fixed;
background-size:100% auto;
font-family: 'Tinos', 'Times New Roman';
font-size: 22px;
margin-top: 0px;
}
.head-bg{
width: 100%;
height: 50px;
background: url(../images/nadpis2_bg.jpg);
background-size:100% 100%;
background-attachment: fixed;
}
.flags{
margin-top: -25px;
padding-right: 35px;
}
.flags img{
width: 35%;
}
.container{
max-width: 760px;
}
.content{
padding: 15px;
}
.height{
height: 50px;
background-color: transparent;
}
/* Always float the navbar header */
.navbar-header {
float: left;
}
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}
/* Always apply the floated nav */
.navbar-nav {
background-color: #000;
float: none;
display: inline-block;
}
.navbar-nav > li {
float: left;
}
.navbar-default {
background-color: transparent;
border-color: transparent;
border-top-color: white;
}
.navbar-default .navbar-nav > li > a {
padding-left: 20px;
padding-right: 20px;
padding-top: 3px;
padding-bottom: 3px;
color: white;
font-size: 12px;
}
/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
float: right;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="head-bg">
<div class="container">
<div class="pull-right flags hidden-xs">
<a><img src="/images/bg_ico.png" alt="BG"></a>
</div>
<div class="height"></div>
<nav class="navbar navbar-default " role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav np">
<li class="nol">ЗА НАС</li>
<li>СТУДИО</li>
<li>ГАЛЕРИЯ</li>
<li>НОВИНИ</li>
<li>Е-МАГАЗИН</li>
<li class="nor">КОНТАКТИ</li>
</ul>
</div>
</nav>
<div class="pull-right flags visible-xs">
<a><img src="/images/bg_ico.png" alt="BG"></a>
</div>
Here is a photo of what it looks like now:
And here is a photo of what I would like it to be:

Answer 1

The solution was to apply style to the ul inside the navbar-collapse div. Here is the css.
.navbar-collapse > ul {
width: 100%;
margin: 0 auto !important;
}
Here is the fixed example:
#media screen
and (min-width: 320px)
and (max-width: 767px)
and (orientation: landscape) {
body{
margin: 0 auto;
background-image: url(../images/background_vm.jpg);
/*background-repeat:no-repeat;*/
background-attachment: fixed;
background-size:100% auto;
font-family: 'Tinos', 'Times New Roman';
font-size: 22px;
margin-top: 0px;
}
.head-bg{
width: 100%;
height: 50px;
background: url(../images/nadpis2_bg.jpg);
background-size:100% 100%;
background-attachment: fixed;
}
.flags{
margin-top: -25px;
padding-right: 35px;
}
.flags img{
width: 35%;
}
.container{
max-width: 760px;
}
.content{
padding: 15px;
}
.height{
height: 50px;
background-color: transparent;
}
/* Always float the navbar header */
.navbar-header {
float: left;
}
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse > ul {
width: 100%;
margin: 0 auto !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}
/* Always apply the floated nav */
.navbar-nav {
background-color: #000;
float: none;
display: inline-block;
}
.navbar-nav > li {
float: left;
}
.navbar-default {
background-color: transparent;
border-color: transparent;
border-top-color: white;
}
.navbar-default .navbar-nav > li > a {
padding-left: 20px;
padding-right: 20px;
padding-top: 3px;
padding-bottom: 3px;
color: white;
font-size: 12px;
}
/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
float: right;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="head-bg">
<div class="container">
<div class="pull-right flags hidden-xs">
<a><img src="/images/bg_ico.png" alt="BG"></a>
</div>
<div class="height"></div>
<nav class="navbar navbar-default " role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav np">
<li class="nol">ЗА НАС</li>
<li>СТУДИО</li>
<li>ГАЛЕРИЯ</li>
<li>НОВИНИ</li>
<li>Е-МАГАЗИН</li>
<li class="nor">КОНТАКТИ</li>
</ul>
</div>
</nav>
<div class="pull-right flags visible-xs">
<a><img src="/images/bg_ico.png" alt="BG"></a>
</div>