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>

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%;