Problem adding anchor tag around image tag

Question

My Flex Gallery is working fine, the only problem is that when I add the <a> tag around the <img> tag, everything gets messed up.

When I wrap the <img> tag with the <a> tag so that I can open the full size image, it ends up messing up the whole design and I'm sure my Something in the CSS messed it up, how to fix it

html,
body,
h1,
h2,
section,
div {
  margin: 0;
  padding: 0;
}

body {
  max-width: 76.5rem;
  padding: clamp(0.5rem, 2vw, 2rem);
  margin: auto;
}

.gallery {
  margin-top: 2rem;
}

.gallery>div {
  columns: 16em;
  gap: 1.25rem;
  padding-top: 1.25rem;
}

.gallery img {
  display: block;
  width: 100%;
  margin-bottom: 1.25rem;
}

<section class="gallery">
  <h2>Gallery Title Here</h2>
  <div>
    <img src="https://source.unsplash.com/OyCl7Y4y0Bk" alt="">
    <img src="https://source.unsplash.com/Kl1gC0ve620" alt="">
    <img src="https://source.unsplash.com/55btQzyDiO8" alt="">
    <img src="https://source.unsplash.com/g0dBbrGmMe0" alt="">
    <img src="https://source.unsplash.com/v1OW17UcR-Q" alt="">
    <img src="https://source.unsplash.com/Wpg3Qm0zaGk" alt="">
    <img src="https://source.unsplash.com/W3FC_bCPw8E" alt="">
    <img src="https://source.unsplash.com/rBRZLPVLQg0" alt="">
    <img src="https://source.unsplash.com/RRksEVVoU8o" alt="">
  </div>
</section>

Answer 1

Works great for me. Anchors mark zero differences.

html,
body,
h1,
h2,
section,
div {
  margin: 0;
  padding: 0;
}

body {
  max-width: 76.5rem;
  padding: clamp(0.5rem, 2vw, 2rem);
  margin: auto;
}

.gallery {
  margin-top: 2rem;
}

.gallery>div {
  columns: 16em;
  gap: 1.25rem;
  padding-top: 1.25rem;
}

.gallery img {
  display: block;
  width: 100%;
  margin-bottom: 1.25rem;
}

<section class="gallery">
  <h2>Gallery With Links</h2>
  <div>
    <a href="google.com"><img src="https://source.unsplash.com/OyCl7Y4y0Bk"></a>
    <a href="google.com"><img src="https://source.unsplash.com/Kl1gC0ve620"></a>
    <a href="google.com"><img src="https://source.unsplash.com/55btQzyDiO8"></a>
    <a href="google.com"><img src="https://source.unsplash.com/g0dBbrGmMe0"></a>
    <a href="google.com"><img src="https://source.unsplash.com/v1OW17UcR-Q"></a>
    <a href="google.com"><img src="https://source.unsplash.com/Wpg3Qm0zaGk"></a>
    <a href="google.com"><img src="https://source.unsplash.com/W3FC_bCPw8E"></a>
    <a href="google.com"><img src="https://source.unsplash.com/rBRZLPVLQg0"></a>
    <a href="google.com"><img src="https://source.unsplash.com/RRksEVVoU8o"></a>
  </div>
</section>

<section class="gallery">
  <h2>Gallery Without Links</h2>
  <div>
    <img src="https://source.unsplash.com/OyCl7Y4y0Bk">
    <img src="https://source.unsplash.com/Kl1gC0ve620">
    <img src="https://source.unsplash.com/55btQzyDiO8">
    <img src="https://source.unsplash.com/g0dBbrGmMe0">
    <img src="https://source.unsplash.com/v1OW17UcR-Q">
    <img src="https://source.unsplash.com/Wpg3Qm0zaGk">
    <img src="https://source.unsplash.com/W3FC_bCPw8E">
    <img src="https://source.unsplash.com/rBRZLPVLQg0">
    <img src="https://source.unsplash.com/RRksEVVoU8o">
  </div>
</section>