From ecba56828d5724f587f135e9dd32471b607f82aa Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 21 Dec 2016 21:38:02 -0800
Subject: [PATCH] fixes #18053 by removing container padding at lower
 breakpoints on responsive navbars

---
 docs/components/navbar.md | 6 ++++--
 scss/_navbar.scss         | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 8a9e4c5738..2b0b837bed 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -367,14 +367,16 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 
 {% example html %}
 <div class="container">
-  <nav class="navbar navbar-light bg-faded">
+  <nav class="navbar navbar-light bg-faded navbar-toggleable-md">
     <a class="navbar-brand" href="#">Navbar</a>
   </nav>
 </div>
 {% endexample %}
 
+When the container is within your navbar, it's horizontal padding is removed at breakpoints lower than your specified `.navbar-toggleable-*` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
+
 {% example html %}
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-faded navbar-toggleable-md">
   <div class="container">
     <a class="navbar-brand" href="#">Navbar</a>
   </div>
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index a1cbf213e0..7a18c41f59 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -242,6 +242,11 @@
             float: none;
           }
         }
+
+        > .container {
+          padding-left: 0;
+          padding-right: 0;
+        }
       }
 
       @include media-breakpoint-up($next) {