Sticky navbar creating a right margin on scrolling down

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><a href="#" class="active">Home</a></li>
                        <li><a href="offers.html">Offers</a></li>
                        <li><a href="AboutUs.html">About Us</a></li>
                        <li><a href="ContactUs.html">Contact Us</a></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><a href="#" class="active">Home</a></li>
                        <li><a href="offers.html">Offers</a></li>
                        <li><a href="AboutUs.html">About Us</a></li>
                        <li><a href="ContactUs.html">Contact Us</a></li>
                    </ul>
                </div> <!-- end collapse div -->	
            </div><!-- end container-fluid-->	
        </nav> <!-- end nav -->	
    </div>
</div>
<!-- Nav Bar Section End-->