Bootstrap 5: positioning the texts in box

Just like the picture above, the texts in the boxes can not be aligned in the normal manner(Left-top corner). I tried to eliminate padding in the boxes but it didn't work, and if the texts get bigger, they would go out of the boxes overwrite on the background image. Here are my html and css:

HTML

  <div id="skills" class="">
    <div class=" post-heading text-center">
      <h3>Skills</h3>
    </div>
    <div class="parallax-header">
      <div class="row g-3">
      <div class="card border-dark col-12 col-lg-4" >
        <div class="card-header">Header</div>
        <div class="card-body text-dark">
          <h5 class="card-title">Dark card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
      <div class="card border-dark col-12 col-lg-4" >
        <div class="card-header">Header</div>
        <div class="card-body text-dark">
          <h5 class="card-title">Dark card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
      <div class="card border-dark col-12 col-lg-4" >
        <div class="card-header">Header</div>
        <div class="card-body text-dark">
          <h5 class="card-title">Dark card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
  </div>
</div>
</div>

CSS

.parallax-header{
    margin-top: 100px;
    background: #000;
    background: linear-gradient(
        rgba(0,0,0,0.3),
        rgba(0,0,0,0.3)
    ),
    url(img/hongkong2.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
}

.parallax-header .card{
    margin: 100px auto;
    max-width: 18em;
    max-height: 20em;
}
.parallax-header .card-header{
    font-family: 'Noto Sans';
    text-transform: uppercase;
}
.parallax-header .card-text{
    font-family: 'Open Sans';
    font-size: 0.8em;
}