How to align multiple images with captions?

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>