title: What is the correct use of the 'row' class when using several div sections stacked onto each other?
body: <p>I'm sure I'm missing something very trivial, but I've got mentally exhausted trying to figure it out.</p>
  
  <p>I got a page with 3 basic sections like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="topHead"&gt;
          ...
      &lt;/div&gt;
      &lt;div id="content"&gt;
          ...
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          ...
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I read that you're supposed to keep <code>.row</code> elements within a <code>.container</code> or <code>.container-fluid</code>. What is the right usage when you have several sections and you want to use the grid system? Should each div described above use the <code>container</code> class?</p>
  
  <p>For instance, I'm using something similar to this:</p>
  
  <pre><code>&lt;body class="container"&gt;
      &lt;div id="topHead"&gt;
          &lt;div id="logo"&gt;
              &lt;img src="logo.png"&gt;
          &lt;/div&gt;
          &lt;div id="site-title"&gt;
              &lt;h2 class="text-center"&gt;My Website&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="content" class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div id="left-menu" class="col-md-3"&gt;
                  &lt;div class="row"&gt;
                      ...
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="main" class="col-md-12"&gt;
                  &lt;div class="row"&gt;
                      ...
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          &lt;p&gt;My Website.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Should I never use nested <code>.row</code> sections?</p>
  
  <p>Sorry if I'm being quite vague. I'm having a lot of trouble to describe what is happening, but it basically boils down to a lot of padding issues when I use the <code>row</code> class. I want to use the grid system, and at times use another grid within one of them, a grid within a grid.</p>
  
  <p>Here's a picture of the behaviour I'm experiencing:
  <img src="https://i.stack.imgur.com/ZgvgQ.png" alt="enter image description here"></p>
  
  <p>I know I have something messed up, but the more I try to debug this, the more I seem to be screwing up the grid.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>In this one I use only one container, the one in the <code>&lt;body&gt;</code> tag.</p>
  
  <p><img src="https://i.stack.imgur.com/aurBi.png" alt="enter image description here"></p>
  
  <p><strong>EDIT2:</strong></p>
  
  <p>Here's the fiddle of the images above. <a href="https://jsfiddle.net/kbqqfn0k/2/" rel="nofollow noreferrer">https://jsfiddle.net/kbqqfn0k/2/</a></p>