Put a text beneath an image - html

Question

I am currently working on a website and what i want to do is I want four pictures in a square and I want a text underneath them.
I already managed to put the four images but once i try to put a text it goes everywhere but not underneath the images
HTML:
<section class="section-2">
<div class="item">
<img src="#">
<p>text</p>
</div>
<div class="item">
<img src="#">
<p>text</p>
</div>
<div class="item">
<img src="#">
<p>text</p>
</div>
<div class="item">
<img src="#">
<p>text</p>
</div>
</section>
CSS:
.section-2 {
margin: 200px 30px 30px 30px;
width:100%;
float:right;
min-height:1000px;
height:100%;
}
img {
float:left;
margin: 0px 100px 200px 150px;
width: 30%;
height: 30%;

Answer 1

The easiest and shortes way would be to simply align the cards in a grid. For that use display: grid;. To have 2 cards aligned horizontally you need to add: grid-template-columns: repeat(2, 1fr); you can change the number 2 with the numebr of cards you want to have aligned next to each other. To seperate the cards from each other, you can use grid-gap: with a value of the gap you want to have.
.section-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 15px;
}
.section-2 div img {
width: 100%;
}
<section class="section-2">
<div>
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
<p>I'm a Syrian Hamster</p>
</div>
<div>
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0736.jpg">
<p>I like to eat watermelons</p>
</div>
<div>
<img src="https://www.tacoshy.de/Images/Areno/IMAG0865.jpg">
<p>I love to burrow tunnels and caves</p>
</div>
<div>
<img src="https://www.tacoshy.de/Images/Areno/IMAG0863.jpg">
<p>And I really enjoy sleeping in my self digged caves</p>
</div>
</section>