title: Bootstrap 4 image grid - white line between rows in Chrome & Safari
body: <p>I have made the following grid in Bootstrap 4:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row padding"&gt;
      &lt;div id="workshop1" class="col-lg-6 nopadding"&gt;
        &lt;img src="images/Werkstatt/image_05.jpg" class="img-fluid nopadding" alt=""&gt;
      &lt;/div&gt;
  
      &lt;div class="col-lg-6"&gt;
        &lt;div class="row"&gt;
          &lt;div id="workshop2" class="col-lg-6 nopadding"&gt;
            &lt;img src="images/Werkstatt/image_06.jpg" class="img-fluid nopadding" alt=""&gt;
          &lt;/div&gt;
  
          &lt;div id="workshop3" class="col-lg-6 nopadding"&gt;
            &lt;img src="images/Werkstatt/image_08.jpg" class="img-fluid nopadding" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
          &lt;div id="workshop4" class="col-lg-6 nopadding"&gt;
            &lt;img src="images/Werkstatt/image_09.jpg" class="img-fluid nopadding" alt=""&gt;
          &lt;/div&gt;
  
          &lt;div id="workshop5" class="col-lg-6 nopadding"&gt;
            &lt;img src="images/Werkstatt/image_07.jpg" class="img-fluid nopadding" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; &lt;!-- end of first row --&gt;
  
    &lt;div class="row padding"&gt;
      &lt;div id="workshop6" class="col-lg-3 nopadding"&gt;
        &lt;img src="images/Werkstatt/image_01.jpg" class="img-fluid nopadding" alt=""&gt;
      &lt;/div&gt;
      &lt;div id="workshop7" class="col-lg-3 nopadding"&gt;
        &lt;img src="images/Werkstatt/image_04.jpg" class="img-fluid nopadding" alt=""&gt;
      &lt;/div&gt;
      &lt;div id="workshop8" class="col-lg-3 nopadding"&gt;
        &lt;img src="images/Werkstatt/image_02.jpg" class="img-fluid nopadding" alt=""&gt;
      &lt;/div&gt;
      &lt;div id="workshop9" class="col-lg-3 nopadding"&gt;
        &lt;img src="images/Werkstatt/image_03.jpg" class="img-fluid nopadding" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt; &lt;!-- end of second row --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The css file looks like this:</p>
  
  <pre><code>.nopadding {
    padding-left: 0;
    padding-right: 0;
  }
  </code></pre>
  
  <p>Now I have the problem, that there is a small white line between the right part of row 2 and row 3 in Safari and Chrome on my Mac. In Firefox everything looks fine:</p>
  
  <p><strong>Firefox</strong>
  <a href="https://i.stack.imgur.com/oZMvZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oZMvZ.jpg" alt="Firefox"></a></p>
  
  <p><strong>Chrome &amp; Safari</strong>
  <a href="https://i.stack.imgur.com/CTb2t.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CTb2t.jpg" alt="Safari &amp; Chrome"></a></p>
  
  <p>Does anybody have an idea how fix this? All browsers are up to date.</p>
  
  <p>Thanks in advance. </p>
  
  <p>Regards
  Lars</p>