title: Remove Spacing Between Divs
body: <p>I have three divs that are all in a row. The divs on the the left and right are divs with image backgrounds, and the center one is textual information. Spacing is being added between each of the divs when I would like them all to be flush with one another (fills to the edge of the screen and touches the div in the center). I use the W3.CSS framework. I tried adding negative margins/paddings and it doesn't resolve what is going on, and I can't seem to figure out how to get rid of it. </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-css lang-css prettyprint-override"><code>.playhouserentals {
    background-size: cover;
    background-image: url('http://via.placeholder.com/500x500');
    height: 500px;
  }
  
  .playhouserentals2 {
    background-size: cover;
    background-image: url('http://via.placeholder.com/500x500');
    height: 500px;
  }
  
  .playhousetitle {
    font-weight: bold;
    color: #605e5e;
  }
  
  .playhouserentalssect {
    width: 600px;
    height: 500px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    text-align: justify;
    background-color: #dbdbdb;
  }
  
  .playhouserentalscard {
    width: 400px;
    border: 1px solid #000;
    -webkit-box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);
    box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);
    "
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" /&gt;
  &lt;div class="w3-row w3-container"&gt;
    &lt;div class="w3-col l4 playhouserentals"&gt;
    &lt;/div&gt;
    &lt;div class="w3-col l4"&gt;
      &lt;div class="playhouserentalssect"&gt;
        &lt;div class="w3-padding-large w3-white playhouserentalscard"&gt;
          &lt;h2 class="cursive playhousetitle"&gt;Rentals&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, feugiat id tristique suscipit, tincidunt sit amet mauris. Duis eget velit in dolor fermentum placerat aliquet nec lacus. Morbi pulvinar magna placerat, rutrum massa a, eleifend
            turpis.&lt;/p&gt;
          &lt;p class="w3-right"&gt;&lt;a href="page/2/rental" class="infolink"&gt;Rental Info&lt;/a&gt; &lt;span class="fa fa-angle-double-right infoarrow" aria-hidden="true"&gt;&lt;/span&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="w3-col l4 playhouserentals2"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>