title: Bootstrap 4 big margin in parent container
body: <p>Okay, this is my 3rd question and hopefully the last one. I get some problems with my page layout that looked like this before:</p>
  
  <pre><code>[navbar]                            
  [1][2][3]
  </code></pre>
  
  <p>I wanted to achieve this effect when resizing:</p>
  
  <pre><code>[navbar]             
  [2][3]         
     [1]
  </code></pre>
  
  <p>(1st div under the 3rd one)</p>
  
  <p>However, when I use (in the main container that holds all the 3 divs) class <code>container mt-3</code> I get this layout:</p>
  
  <pre><code>[navbar]             
  [1][2]                                                                          
     [3]
  </code></pre>
  
  <p>Now, when I change the margin-left of the 3rd div it doesn't go up to the top row but just moves to the left - something happens like it would be in another row class.</p>
  
  <p>When I use parent-container <code>container mt-3</code>          </p>
  
  <pre><code>[navbar]             
  [1][2]   [3]
  </code></pre>
  
  <p>And they are really small and I can't change the width no matter what I do. I even tried changing the bootstrap's "container" class with both px and %. </p>
  
  <p>container-fluid does the job a bit because all the divs are bigger (and on 100% width of the page) but I would want to have it just like 90%, but still, the [3] div is on the right side mile from the [2]. When I resize the window, the [2] div goes in this white space between [1] and [3] under the [3]. So it looks similar to this:</p>
  
  <pre><code>[navbar]                                       
  [2]   [3]          
     [1]         
  </code></pre>
  
  <p>CSS CODE:</p>
  
  <pre><code>.main{
      background-color: red;
      box-shadow: 3px 3px 20px #000000;
      border-radius: 20px;
  }
  
  .left{
      background-color: green;
      max-width: 200px;
      border-radius: 20px;
  }
  
  .right{
      background-color: blue;
      max-width: 200px;
      border-radius: 20px;    
  }   
  
  .parent-container {
      display: flex;
  }
  
  .right-content{
      width: 100%;
      text-align: center;
      float: center;
      margin-top: 10px;
  }
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="parent-container container mt-3"&gt;
      &lt;div class="row"&gt;
          &lt;div class="left col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0"&gt;
              &lt;div class="col-12 text-center" style="margin-bottom: 15px"&gt;
                  &lt;h3&gt;TITLE LEFT&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=" col-8 col-lg-6"&gt;
              &lt;div class="container card"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-12 text-center"&gt;
                              &lt;h2&gt;TITLE CENTER&lt;/h2&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-12 text-center"&gt;
                                  &lt;h3&gt;heading 3&lt;/h3&gt;
                                  &lt;h6&gt;heading 6&lt;/h6&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                      &lt;div class="col-12 mx-auto"&gt;
                          &lt;a href="#" class="article-link"&gt;
                              &lt;h3&gt;Heading 3&lt;/h3&gt;
                              &lt;p&gt;Text&lt;/p&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;hr&gt;
      &lt;/div&gt;
  &lt;/div&gt;
          &lt;div class="right col-4 col-lg-3"&gt;
              &lt;div class="right-content"&gt;
                  &lt;h2&gt;TITLE RIGHT&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>