Grid system can't locate with navbar - css

Question

I have some question with navbar and grid system.
Q1.grid system
I make two 100% height navbar on left and right , but the center text seems locate on the left :0 ,and the left navbar overlaps it.
Here's a link to my code.
enter link description here
html, body {
height: 100%;
width: 100%;
margin: 0;
}
[class*="col-"] {
float: left;
}
.col-1 {
width: 4.16%;
}
.col-2 {
width: 8.33%;
}
.col-3 {
width: 12.5%;
}
.col-4 {
width: 16.66%;
}
.col-5 {
width: 20.83%;
}
.col-6 {
width: 25%;
}
.col-7 {
width: 29.16;
}
.col-8 {
width: 33.33%;
}
.col-9 {
width: 37.5%;
}
.col-10 {
width: 41.66%;
}
.col-11 {
width: 45.83%;
}
.col-12 {
width: 50%;
}
.col-13 {
width: 54.16%;
}
.col-14 {
width: 58.33%;
}
.col-15 {
width: 62.5%;
}
.col-16 {
width: 66.66%;
}
.col-17 {
width: 70.83%;
}
.col-18 {
width: 75%;
}
.col-19 {
width: 79.16%;
}
.col-20 {
width: 83.33%;
}
.col-21 {
width: 87.5%;
}
.col-22 {
width: 91.66%;
}
.col-23 {
width: 95.83%;
}
.col-24 {
width: 100%;
}
.navbar-fixed-top {
position: fixed;
top: 0;
border-radius: 0;
right: 0;
left: 0;
padding-left: 0;
padding-right: 0;
z-index: 1030;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #1c2333;
clear: both;
}
li {
float: left;
border: 1 white dashed;
line-height: 50px;
}
li:last-child {
border-right: none;
}
li a {
height: 57px;
width: 60px;
display: block;
color: #8fa5be;
text-align: center;
padding: 10px 10px;
text-decoration: none;
border-radius: 0;
overflow: visible;
border-style: solid transparent;
cursor: pointer;
}
.active, li a:hover {
color: #ffffff;
background-color: #3099f5;
}
/*--*/
.nv{
position:fixed;
display: flex;
width:4.16%;
height: 100%;
}
.nvr {
display: flex;
position: fixed;
height: 100%;
width: 80px;
border: none;
border-radius: 0;
margin: 0;
}
.height-100 {
height: 100%;
}
<div class="row navbar-fixed-top">
<div class="row">
<div class="col-24">
<ul>
<li><a class="active">Home</a></li>
<li>News</li>
<li>Contact</li>
<li style="float:right"><a class="active" href="#about">hom</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-1">
<!--
<div class="nv height-100">
<ul>
<li><a>hom</a></li>
<li><a class="active" href="#home">hom</a></li>
</ul>
</div>
-->
<div class="nv">
<ul>
<li>Left</li>
<li>News</li>
<li>Cont</li>
<li>About</li>
</ul>
</div>
</div>
<div class="col-22">
whatever ,here just the testing text.
</div>
<!--
<div>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
-->
<div class="col-1">
<div class="nv">
<ul>
<li>Right</li>
<li>News</li>
<li>Cont</li>
<li>About</li>
</ul>
</div>
</div>
</div>
The picture shows what I want .
What I actually want .
Q2.
How can I make the same text block size with top and both side ?
At the full screen , they have the same size , but I want to know how to do.
Thank you very much.