Trying to fixed the navigation bar - html

Question

I've been trying to fixed the problem with my navigation bar.
What I'd like to do, is to put always the home icon on the left and setting on the right while the navigation title on the center as shown in the image.
But still look like this
when view in smallest/large screen other than my laptop 1366px wide
Is there anyone can help me with the same problem?
here the code.
<nav>
<div class="nav__container">
<div class="nav__container--left">
<div class="">
<a href="http://localhost/mpci_virtual_office/" title="Return Home">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="nav__container--center">
<strong>Home</strong>
</div>
<div class="nav__container--toggle">
<a id="push" class="visible-xs visible-sm visible-md"><i class="fa fa-bars "></i></a>
</div>
<div class="nav__container--right">
<a class="dropdown-toggle" data-toggle="dropdown" title="Settings">
<i class="fa fa-gear fa-lg"></i>
</a>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And this is my CSS
/* Naviation Style */
.nav__container {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
}
.nav__container--left,
.nav__container--center,
.nav__container--toggle,
.nav__container--right {
width: 50px;
height: 100%;
position: absolute;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items:center;
align-content: center;
}
.nav__container--left { }
.nav__container--left div { }
.nav__container--left div a { }
.nav__container--center {
width: 100%;
z-index: -1;
text-align: center;
}
.nav__container--toggle {
right: 50px;
}
.nav__container--right {
right: 0;
}

Answer 1

nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
try out this css snippet. if you set position you allways have to set top|bottom and left|right

Answer 2

Something like the below should work (expand snippet).
/* Naviation Style */
.nav__container {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
}
.nav__container--left,
.nav__container--center,
.nav__container--toggle,
.nav__container--right {
width: 50px;
height: 100%;
position: absolute;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items:center;
align-content: center;
}
.nav__container--left { }
.nav__container--left div { }
.nav__container--left div a { }
.nav__container--center {
width: 100%;
z-index: -1;
text-align: center;
}
.nav__container--toggle {
right: 50px;
}
.nav__container--right {
right: 0;
}
.nav__container {
position: fixed;
background: cadetblue;
left: 0;
right: 0;
height: auto;
min-height: 50px;
color: white;
}
ul.dropdown-menu {
display: none;
}
.nav__container--right {
background: #508587;
}
.nav__container--left {
background: #508587;
}
body {
min-height: 1000px;
}
<nav>
<div class="nav__container">
<div class="nav__container--left">
<div class="">
<a href="http://localhost/mpci_virtual_office/" title="Return Home">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="nav__container--center">
<strong>Home</strong>
</div>
<div class="nav__container--toggle">
<a id="push" class="visible-xs visible-sm visible-md"><i class="fa fa-bars "></i></a>
</div>
<div class="nav__container--right">
<a class="dropdown-toggle" data-toggle="dropdown" title="Settings">
<i class="fa fa-gear fa-lg"></i>
</a>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
Essentially:
.nav__container {
position: fixed;
background: cadetblue;
left: 0;
right: 0;
}