I'm currently designing a website and I'm trying to create a layout with four images in a square arrangement, each with text underneath them. However, I'm facing an issue where the text is not appearing underneath the images as intended.
Here's the HTML code:
<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>
And here's the CSS code:
.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%;