How to align multiple images with captions? - html

Question

I am trying to align 4 images horizontally each with its own caption, and then other 4 images under exactly the same.
I am new to code, so I only use HTML and CSS.
.skill-bg {
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.skills {
column-count: 4;
column-gap: 0;
page-break-inside: avoid;
break-inside: avoid-column;
font-family: 'Poppins', sans-serif;
justify-content: space-between;
}
.skills > img {
display: flex;
width: 100%;
}
#media (max-width: 768px) {
.skills {
column-count: 2
}
}
<section class="skill-bg">
<h2 align="center" class="column-title2">Hard Skills</h2>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="copywriting logo" width="100">
<figcaption>Copywriting</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="graphic design logo" width="100">
<figcaption>Graphic Design</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user research logo" width="100">
<figcaption>User Research</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user testing logo" width="100">
<figcaption>User Testing</figcaption>
</figure>
</div>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="html logo" width="100">
<figcaption>HTML</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="css logo" width="100">
<figcaption>CSS</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="prototyping logo" width="100">
<figcaption>Prototyping</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="photography logo" width="100">
<figcaption>Photography</figcaption>
</figure>
</div>
</section>
For some reason, the first image in the row is not aligned with the other 3. And on mobile (where they are displayed in 2 columns) the first column has the same problem.
Thank you very much for your time!

Answer 1

Reset the default top margin on the figure.
figure {
margin-top: 0;
}
.skill-bg {
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.skills {
column-count: 4;
column-gap: 0;
page-break-inside: avoid;
break-inside: avoid-column;
font-family: 'Poppins', sans-serif;
justify-content: space-between;
}
.skills>img {
display: flex;
width: 100%;
}
figure {
margin-top: 0;
}
#media (max-width: 768px) {
.skills {
column-count: 2
}
}
<section class="skill-bg">
<h2 align="center" class="column-title2">Hard Skills</h2>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="copywriting logo" width="100">
<figcaption>Copywriting</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="graphic design logo" width="100">
<figcaption>Graphic Design</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user research logo" width="100">
<figcaption>User Research</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user testing logo" width="100">
<figcaption>User Testing</figcaption>
</figure>
</div>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="html logo" width="100">
<figcaption>HTML</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="css logo" width="100">
<figcaption>CSS</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="prototyping logo" width="100">
<figcaption>Prototyping</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="photography logo" width="100">
<figcaption>Photography</figcaption>
</figure>
</div>
</section>