Remove extra space after navbar bootstrap - html

Question

I tried this code to create a bootstrap navigation with logo centered inside the nav bar but I'm getting an extra space on the right side of the page.
I want to fix the extra space after the navigation bar.
With this code the pages scrolls to an empty space to the right, the page should fit the navbar no extra.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
.navbar {
text-transform: uppercase;
background-color: #27B6C9;
position: relative;
top: 0px;
font-size: 14px;
border-bottom: none;
margin-bottom: 0px;
padding: 0px 0px;
font-weight: 600;
}
.navbar-brand {
padding: 0 10px;
height: auto;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 126px;
vertical-align: middle;
padding: 0 18px;
}
}
#media (min-width: 892px) {
.navbar-nav > li a {
padding: 0 30px;
}
}
#media (min-width: 1100px) {
.navbar-nav > li a {
padding: 0 40px;
}
}
<nav class="navbar navbar-default">
<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 hidden-sm hidden-md hidden-lg" href="#">
<img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" alt="WPO LOGO" width="80" />
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Services
</li>
<li>Policies
</li>
<li class="hidden-xs">
<a href="#">
<img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" alt="Brand" width="80" />
</a>
</li>
<li>Calendar
</li>
<li>FAQ
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>

Answer 1

i add new class mr0 and add it in your button navbar
copy this class in your css and relpace your button
.mr0{
margin-right:0pxImportant;
}
<button type="button" class="navbar-toggle mr0" data-toggle="collapse"