very new to coding. I am trying to align 4 images with button links in a row and can’t seem to get it right! They are in a vertical row just now but if I try and align them in a row, the text goes in a different place than the images. Thanks! Sorry – I know it’s basic but I can’t seem to figure it out.

The code is:

                   <div class="polaroid">
                    <img src="images/Crime.png" alt="Crime & Thriller"        style="width:25%">
                    <div class="container">
                    <p>
                        <a href="Pages/Crime.html" target="_blank">Crime & Thriller</a>
                    </div>
                  </div>
                  <div class="polaroid">
                    <img src="images/empowerment.png" alt="Female Empowerment" style="width:25%">
                    <div class="container">
                    <p>
                        <a href="Pages/Empowerment.html" target="_blank">Female Empowerment</a> 
                    </div>
                  </div>
                  <div class="polaroid">
                    <img src="images/Finance.png" alt="Finance" style="width:25%">
                    <div class="container">
                    <p>
                        <a href="Pages/Finance.html" target="_blank">Finance</a>
                    </div>
                  </div>
                  <div class="polaroid">
                    <img src="images/translation.png" alt="Foreign Literature" style="width:25%">
                    <div class="container">
                    <p>
                        <a href="Pages/Translation.html" target="_blank">Foreign Literature</a>
                    </div>
                  </div>

I have tried flex, align, etc.