Creating a rectangle with text inside a pattern [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am new in HTML and CSS and there is a problem I am facing using CSS.
I want to create a section like this:
---Picture---
--Text--
---Picture---
--Text--
---Picture---
--Text--
---Picture---
--Text--
I want the text to be wrapped inside a rectangle with a specific background color. The issue is that whenever I am setting a background-color for my rectangle, the size of the div includes all of the content beneath.
.lower-part {
margin-top: 15%;
}
.lower-part .row .image img {
height: 80%;
width: 80%;
}
.lower-part .row .textbox {
background-color: red;
}
<div class="lower-part">
<div class="row">
<div class="image"><img src="images/BadmintonPicture.svg" alt="Badminton Picture"></div>
<div class="textbox1">
Sports.
<p>For me, nothing is better than regular excercise. It keeps me energetic throughout the day.</p>
<div class="row">
<div class="image"><img src="images/CookingPicture.svg" alt="Cooking Picture"></div>
<div class="textbox">
Cooking.
<p>I LOVE Food. I try to experiment with new recipes whenever I can. The Food Lab by Kenji Lopéz-Alt helps me being a better cook.</p>
<div class="row">
<div class="image"><img src="images/ReadingPicture.svg" alt="Reading Picture"></div>
<div class="textbox">
Reading.
<p> I love self-development books, because it helps me grow as a person.
<span>Favourites:</span>
<br>Slight Edge, Atomic Habits, How to Win Friends & Influence People .
</p>
<div class="row">
<div class="image"><img src="images/GuitarPicture.svg" alt="Guitar Picture"></div>
<div class="textbox">
Music.
<p>I grew up playing the violin but the guitar seemed way cooler. So I stick with that for the most part. Also, I like to sing every few minutes.</p>
</div>
</div>
</div>
Sass
.lower-part {
margin-top: 15%;
.row {
.image {
img {
height: 80%;
width: 80%;
}
}
.textbox {
background-color: red;
}
}
}

Answer 1

You forgot to close your <div> tags.
It helps if you properly indent and use new lines for new tags, because this way you can easily keep track of open tags.
<div class="lower-part">
<div class="row">
<div class="image">
<img src="images/BadmintonPicture.svg" alt="Badminton Picture">
</div>
<div class="textbox1">
Sports.
<p>
For me, nothing is better than regular excercise.
It keeps me energetic throughout the day.
</p>
</div>
</div>
</div>
etc.