How can I make a box of content in html?

I'm trying to lea html and I need to be able to section things into the spot they are meant to be in So like each thing will have a picture and some text

I need to make a blue box and inside it I need a image and text And next to it, the same thing. Basically if I had a way to create a new inside the real one? I guess. Im not sure. This is what I tried, and its pretty much what I want but I need the box to be solid, and maybe if someone could help me make the image and text centered on the horizontal axis that could also help.

<html>
    <head>
        <title>
            MaGa V1
        </title>
        <style type="text/css">
            .img_div {float: left; border: 1px solid white;}
        </style>
    </head>
    <body  bgcolor="#000000">
        <div class="img_div" style="margin-right: 32px">
            <img src="./../images/Shadows over Iistrad/Shadows over Iistrad.png"/>
            <figcaption>
                <a href="./Shadows over Iistrad.html" target="_self">Shadows over Iistrad</a>
            </figcaption>
        </div>
        <div class="img_div" style="margin-right: 32px">
            <img src="./../images/Battle for Zendikar/Battle for Zendikar.png"/>
            <figcaption>
                <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
            </figcaption>
        </div>
    </body>
</html>