Sticky navbar creating a right margin on scrolling down - css

Question

I am trying to create a nav bar (boot strap) that sticks to the top once scrolled down past through it. I was able to achieve this behavior using affix plugin, but with a glitch. The nav bar is creating certain amount of right margin on scrolling down. I am unable to resolve the issue. Please help me resolve this.
This is my html code for nav bar
$(function () {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: {
top: $('#nav').offset().top
}
});
});
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
#media (min-width: 768px) {
.navbar {
border-radius: 15
}
}
.navbar-toggle {
border-radius: 15
}
.navbar-toggle .icon-bar {
border-radius: 0
}
.navbar {
background: #700000;
margin-bottom: auto;
border-color: #384248;
width: 100%;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 17px;
padding-bottom: 17px;
}
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
margin: 0px;
-webkit-transition: all .6s ease-in-out;
}
#nav > .navbar-inner {
border-left: 0;
border-right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
/* To simulate overflow for demo purposes only */
html { height: 200%; } body { height: 100%; }
<!-- External Resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- External Resources -->
<!-- Nav Bar Section -->
<div id="nav-wrapper">
<div class = "row" id="nav-row">
<nav class="navbar navbar-inverse navbar-static-top" id = "nav" role="navigation">
<div class = "container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavBar">
<!--<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 visible-xs" href="index_hth.html">Navigation</a>
</div> <!-- end navbar-header div-->
<div class="collapse navbar-collapse" id = "myNavBar">
<ul class="nav navbar-nav" id="menu-bar">
<li>Home</li>
<li>Offers</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div> <!-- end collapse div -->
</div><!-- end container-fluid-->
</nav> <!-- end nav -->
</div>
</div>
<!-- Nav Bar Section End-->
Please look into this and help me resolve the issue. Thanks in advance.

Answer 1

Using the code inspector I found that #nav-wrapper .row#nav-row has a negative margin set.
The rule of specificity and margin: 0 fixes the issue
#nav-wrapper .row#nav-row {
margin: 0;
}
$(function () {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: {
top: $('#nav').offset().top
}
});
});
#nav-wrapper .row#nav-row {
margin: 0;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
#media (min-width: 768px) {
.navbar {
border-radius: 15
}
}
.navbar-toggle {
border-radius: 15
}
.navbar-toggle .icon-bar {
border-radius: 0
}
.navbar {
background: #700000;
margin-bottom: auto;
border-color: #384248;
width: 100%;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 17px;
padding-bottom: 17px;
}
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
margin: 0px;
-webkit-transition: all .6s ease-in-out;
}
#nav > .navbar-inner {
border-left: 0;
border-right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
/* To simulate overflow for demo purposes only */
html { height: 200%; } body { height: 100%; }
<!-- External Resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- External Resources -->
<!-- Nav Bar Section -->
<div id="nav-wrapper">
<div class = "row" id="nav-row">
<nav class="navbar navbar-inverse navbar-static-top" id = "nav" role="navigation">
<div class = "container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavBar">
<!--<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 visible-xs" href="index_hth.html">Navigation</a>
</div> <!-- end navbar-header div-->
<div class="collapse navbar-collapse" id = "myNavBar">
<ul class="nav navbar-nav" id="menu-bar">
<li>Home</li>
<li>Offers</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div> <!-- end collapse div -->
</div><!-- end container-fluid-->
</nav> <!-- end nav -->
</div>
</div>
<!-- Nav Bar Section End-->