CODEWITHSUNDEEP
htmlcssw3.css
cweave
cweave

Reputation: 306

Remove Spacing Between Divs

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. 

.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);
  "

}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-row w3-container">
  <div class="w3-col l4 playhouserentals">
  </div>
  <div class="w3-col l4">
    <div class="playhouserentalssect">
      <div class="w3-padding-large w3-white playhouserentalscard">
        <h2 class="cursive playhousetitle">Rentals</h2>
        <p>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.</p>
        <p class="w3-right"><a href="page/2/rental" class="infolink">Rental Info</a> <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span></p>
      </div>
    </div>
  </div>
  <div class="w3-col l4 playhouserentals2">
  </div>
</div>

Upvotes: 1

Views: 539

Answers (1)

dippas
dippas

Reputation: 60603

Simple remove width: 600px from child in the middle

.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; --- remove this */
  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);
  "

}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-row w3-container">
  <div class="w3-col l4 playhouserentals">
  </div>
  <div class="w3-col l4">
    <div class="playhouserentalssect">
      <div class="w3-padding-large w3-white playhouserentalscard">
        <h2 class="cursive playhousetitle">Rentals</h2>
        <p>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.</p>
        <p class="w3-right"><a href="page/2/rental" class="infolink">Rental Info</a> <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span></p>
      </div>
    </div>
  </div>
  <div class="w3-col l4 playhouserentals2">
  </div>
</div>

Upvotes: 1

Related Questions