title: Bootstrap 4 columns and rows producing unwanted padding
body: <p>I am trying to use bootstrap to create columns and rows to place my images however too much padding is being added around the images which is preventing my images from looking like the design:</p>
  
  <p><a href="https://i.stack.imgur.com/8cQVg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8cQVg.png" alt="enter image description here"></a></p>
  
  <p>This is how I structured my HTML:</p>
  
  <pre><code>&lt;!-- header --&gt;
  
  &lt;header&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-5"&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;img src="{!! $bg_image_col1_row1['url'] !!}" alt="{!! $bg_image_col1_row1['alt'] !!}" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;img src="{!! $bg_image_col1_row2['url'] !!}" alt="{!! $bg_image_col1_row2['alt'] !!}" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-7"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;img src="{!! $bg_image_co21_row1_col1['url'] !!}" alt="{!! $bg_image_co21_row1_col1['alt'] !!}" /&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;img src="{!! $bg_image_co21_row1_col2['url'] !!}" alt="{!! $bg_image_co21_row1_col2['alt'] !!}" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12"&gt;
                          &lt;div class="container"&gt;
                              &lt;h1&gt;@php(get_field('front-page__title'))&lt;/h1&gt;
                              &lt;div&gt;@php(get_field('front-page__slogan'))&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12"&gt;
                          &lt;div class="col-md-9"&gt;
                              &lt;div class="container"&gt;
                                  &lt;div class="zeo-cases-button"&gt;
                                      &lt;a href="@php(get_field('front-page__button--url'))" class="button"&gt;@php(get_field('front-page__button--text'))&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;div class="container"&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;!-- /header --&gt;
  </code></pre>
  
  <p>But this is resulting in this:</p>
  
  <p><a href="https://i.stack.imgur.com/SAvOE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SAvOE.jpg" alt="enter image description here"></a></p>
  
  <p>My question. Did I write the bootstrap elements correctly? How should I go about the padding in case the bootstrap elements are written correctly so that I can match the requirements of the design? Thanks a lot for your time!</p>