How do I reduce the gap space when wrapping using flex: wrap

Question

How do I reduce or remove this space when wrapping? What also causes this behavior.

Here is the screenshots and code

enter image description here

#gallery .card-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  gap: 10px;
}

.card-container .card {
  border: solid black 1px;
  height: 40%;
  width: 30%;
  flex: 1 1 21rem;
}

<section id="gallery">
  <div class="card-container">
    <div class="card">
      <h1>test</h1>
    </div>
    <div class="card">
      <h1>test</h1>
    </div>
    <div class="card">
      <h1>test</h1>
    </div>
  </div>
</section>

Answer 1

Write CSS in this format:

#gallery .card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card-container .card {
  border: solid black 1px;
  height: 50%;
  width: 50%;
}