.section--7__photos {
height: 50vw;
max-height: 70rem;
margin: 0 8%;
background: url("https://ableton-production.imgix.net/about/photo-8.jpg?crop=right&dpr=1.5&fit=crop&h=250&ixjsv=1.1.3&q=66&w=417") no-repeat top 0% center/ contain;
}
.section--7__text {
margin: 0 8%;
padding: 8%;
background-color: #11c01f;
}
.section--7__text p {
margin: 0;
}<div class="section--7__container">
<div class="section--7__photos"></div>
<div class="section--7__text">
<p class="text--main__1">
Lorem...
</p>
</div>Trying to adjust the background image in a container that changes size based on viewport width. However, there is a gap between the container holding the image and its adjacent sibling (green text field). https://i.sstatic.net/6xLgS.png
<div class="section--7__container">
<div class="section--7__photos"></div>
<div class="section--7__text">
<p class="text--main__1">
Lorem...
</p>
</div>
CSS
.section--7__photos {
height: 50vw;
max-height: 70rem;
margin: 0 8%;
background: url("Images/photo-8.jpg") no-repeat top 0% center/ contain;
}
.section--7__text {
margin: 0 8%;
padding: 8%;
background-color: #11c01f;
}
.section--7__text p {
margin: 0;
}