title: Bootstrap 4 navbar sticky top doesn't work when nested in div
body: <p>I'm a beginner starting from a Web application and using Bootstrap 4 to design my web. Here is a quick question.</p>
  
  <p>Navbar doesn't tend to stick on top when the code is like</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-sm navbar-dark sticky-top"&gt;
    &lt;div class="container" style="padding:0;"&gt;
      &lt;a class="navbar-brand text-info"&gt;The Bros&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"&gt;&lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="collapsibleNavbar"&gt;
        &lt;ul class="nav nav-justified"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>but it works when I only change the order of first and second like below:
  (the rest is the same as before)</p>
  
  <pre><code>&lt;div class="container" style="padding:0;"&gt;
  &lt;nav class="navbar navbar-expand-sm navbar-dark sticky-top"&gt;
  </code></pre>
  
  <p>Since I would like to make the background of navbar colored, I want to use the second method but the navbar doesn't stick to the top.</p>
  
  <p>Is there any way to solve it?</p>