I have to remake a page for my web design class. I've got the rest done, but how do I add a white box over an image and position the text so that it's within the box? Like where it says "adventures off the beaten path" or "hiking" or "camping." Should I be using a div?

Basically, how do I make it look like this:
![Text](https://i.stack.imgur.com/YXMDq.png)

```
    <div class="white_box">
        <img src="img/banner image.png">
        <h2>ADVENTURES OFF THE BEATEN PATH</h2>
        <p>It's time to explore your path. Where will you go?</p>
    </div>

    <h3>POPULAR ARTICLES</h3>
    <div class="red_box"></div>

    <div class="hiking">
        <img src="img/hiking trail image.png" alt="trail" title="trail">
        <h4>HIKING</h4>
        <p>Trek along the edges of a glacier, through wildflower-filled valleys, meandering streams, and admire the turquoise blue glacier-fed lakes. This is hiking in the Rockies where there are countless places to roam and an endless tangle of trails.</p>
    </div>  

    <div class="camping">
        <img src="img/tent image.png" alt="tent" title="tent">
        <h4>CAMPING</h4>
        <p>There’s nothing quite like camping among stunning ancient mountain tops and feeling like you’re one with nature. Take a ride through breathtaking blue lakes, go for quiet walks in the forest, or go bird watching to truly get away from it all.</p>
    </div>

```

```
.white_box {
    width: 430px;
    height: 200px;
}
h2 {
    font-size: 48px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}
p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(60 61 64);
}
.red_box {
    background-color: rgb(134, 25, 25);
    width: 640px;
    height: 12px;
    margin-left: 10px;
}

h4 {
    font-size: 24px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}

```