title: Bootstrap 4 : div with Equal height with color fill and gutter in between
body: <p>I am trying to achieve a bootstrap 4 layout for which I have added screenshot. I read most of the other stack overflow post, but not getting the solution</p>
  
  <ol>
  <li>The <code>.container-fluid</code> layout is having the grey fill color, which is by using my custom class <code>.bg-grey</code>. </li>
  <li>According to the design , the body is in center, so I added <code>.container</code> class to wrap the columns.</li>
  <li><code>.col-8</code> has <code>.bg-white</code> and <code>.col-4</code> has <code>.bg-dark</code> classes with them. And I had to make it off same height.</li>
  <li>There is a gutter(space) in between them.</li>
  </ol>
  
  <p><strong>Problem Facing</strong></p>
  
  <ol>
  <li>Getting an extra margin on right, so the design is not properly centered in between.</li>
  </ol>
  
  <p><strong>Design trying to achieve</strong></p>
  
  <p><a href="https://i.stack.imgur.com/U1N41.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U1N41.png" alt=" bootstrap 4 Layout : trying to achieve"></a></p>
  
  <p>So the problem in my solution is, I am getting an extra margin on the right. I have tried two cases for which I have the code.</p>
  
  <p><strong>CASE 1:</strong></p>
  
  <p>Tried a lot with below code and was not able to achieve the  solution.</p>
  
  <ol>
  <li>If I add margin to <code>col-8</code>, second div <code>.col-4</code> comes down as the total width increases.</li>
  <li>If I add <code>.bg-white</code> and <code>.bg-dark</code> to a new child the size of the fill color changes.</li>
  <li>To the newly created div inside, I have added <code>.h-100</code> class, but even this didn't work</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/onT2Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/onT2Y.png" alt="No gutter or no equal height"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-sm-8  "&gt;
    &lt;div class="content px-4 py-2 bg-white h-100"&gt;
      &lt;h3 class="heading03"&gt;Life at &lt;/h3&gt;
      &lt;h2 class="heading02"&gt;.&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
        Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
      &lt;/p&gt;
  
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-sm-4 "&gt;
    &lt;div class=" content px-4 py-2 bg-black white-text h-100"&gt;
      &lt;h5 class="heading05"&gt;Latest at &lt;/h5&gt;
      &lt;h4 class="heading04 text-muted"&gt;Top 10 &lt;/h4&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...
      &lt;/p&gt;
      &lt;h5 class="heading05"&gt;Latest at &lt;/h5&gt;
      &lt;h4 class="heading04 text-muted"&gt;Top 10 &lt;/h4&gt;
      &lt;p class="m-0"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...
      &lt;/p&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong>CASE 2:</strong> This layout I tried from the below example from bootstrap website.
  <a href="https://getbootstrap.com/docs/4.0/examples/product/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/examples/product/</a></p>
  
  <p>This is how it looks with current code. The margins are not equal</p>
  
  <ol>
  <li>Tried removing <code>. mr-md-3</code> from <code>.col-4</code>. It didn't help</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/bBswS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bBswS.png" alt="design 2"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  
  &lt;div class="container-fluid bg-grey pb-5 "&gt;
    &lt;div class="row"&gt;
      &lt;div class="container"&gt;
        &lt;!-- second part --&gt;
  
  
        &lt;div class="row pt-5"&gt;
  
          &lt;div class="d-md-flex flex-md-equal w-100 "&gt;
  
            &lt;div class="col-8 bg-white mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden"&gt;
              &lt;div class="my-3 py-3"&gt;
                &lt;h3 class="heading03"&gt;Life &lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                  eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
                  tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
  
            &lt;div class="col-4 bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-white overflow-hidden"&gt;
              &lt;div class="col-12"&gt;
                &lt;div class="my-3 p-3"&gt;
                  &lt;h2 class="display-5"&gt; headline&lt;/h2&gt;
                  &lt;p class="lead"&gt;subheading.&lt;/p&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
  
  
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>