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) {