White right and left margins in Bootstrap navbar

Question

This issue has been bothering me forever. I'm using the Bootstrap framework and whenever I view my site on mobile devices I get 20px margins on the right and left side of the navbar.

In the past some have suggested the following:

.navbar-fixed-top {
    margin-left: -20px;
    margin-right: -20px;
}

Unfortunately, this doesn't work. It solves the issue with the navbar margins but creates issues with the rest of the page.

You can view an example of this problem here: http://www.theplaybook.co

Any insights are much appreciated.

Answer 1

It's caused by this line (in bootstrap-responsive.css, line 802):

@media (max-width: 767px) {
    .navbar {
        padding: 0 20px;
    }