1
私は3つのdivがすべて並んでいます。左右のdivは画像の背景を持つdivであり、中央のdivはテキスト情報です。各divの間に、それらをすべて互いに面白くしたい（画面の端に塗りつぶし、中央のdivに触れる）ようにする間隔が追加されています。私はW3.CSSフレームワークを使用します。私は否定的なマージン/パディングを追加しようとしましたが、何が起こっているのかを解決しないので、それを取り除く方法を理解できないようです。ディビジョン間のスペースを削除する
.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>