How can I align a header to the left of a card layout, even when the card layout wraps?

Requirement I have a header and a card layout that has the cards in a horizontal layout, the header is aligned at the left edge and above of the card layout, and both of these components are in the middle.

Problem In the codepen/JSFiddle, this is already achieved, when the window resizes, there is also no problem, but the problem occurs when the card layout begins to wrap, when it wraps to a vertical layout, the card layout is no longer centered. I want it to continue to be centered.

Codepen: https://codepen.io/Jia8-fat/pen/bNGpRYq JSFiddle: https://jsfiddle.net/tL1msnb7/

What I've tried Referring to the codepen/JSFiddle, I've tried adding justify-content: center; to the .card-layout class, which in turn DOES center the card layout. However the header is still at the left side, and is no longer aligned with the card layout. To combat this problem, I tried to modify the align-items to center in the .content class, but this makes it so that the text is centered and is no longer aligned with the card layout.

If someone could point me in the right direction, I would greatly appreciate it.

Here is the code without the codepen or jsfiddle:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
      .card {
        display: flex;
        flex-direction: column;
        width: 170px;
        height: 170px;
        background-color: lightblue;
        color: white;
        padding: 16px;
        border-radius: 20px;
      }

      .card-layout {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }

      .content {
        margin: 0px auto;
        display: flex;
        flex-direction: column; 
        align-items: start;
      }

      .center {
        display: flex;
        justify-content: center;
      }
    </style>
    
</head>
<body>
  <div class="center">
    <div class="content">
      <h2>HELLO</h2>

      <div class="card-layout">

        <div class="card">
          <h2>Some random information.</h2>
          <div class="subtext">
            <p class="secondary-text">this is some subtext under an illustration or image</p>
          </div>
        </div>

        <div class="card">
          <h2>Some random information.</h2>
          <div class="subtext">
            <p class="secondary-text">this is some subtext under an illustration or image</p>
          </div>
        </div>

        <div class="card">
          <h2>Some random information.</h2>
          <div class="subtext">
            <p class="secondary-text">this is some subtext under an illustration or image</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

EDIT: Hope fully this image clarifies better what I want: https://imgur.com/a/61f371N

Solution

Is this the behavior you want?

.content > h2{
  width: calc( 100% - 16px);
  padding:16px;
}
.card {
        display: flex;
        flex-direction: column;
        width: 170px;
        padding: 16px;
        height: 170px;
        background-color: lightblue;
        color: white;
        border-radius: 20px;
      }

.card-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.content {
  margin: 0px auto;
  display: flex;
  flex-direction: column; 
  align-items: center;
}

.center {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 630px) {
  .content > h2 {
    width: calc(404px - 16px);
  }
  .card-layout {
    justify-content:center;
  }
}
@media screen and (max-width: 423px) {
  .content > h2 {
    width: calc(202px - 16px);
  }
  .card-layout {
    justify-content:center;
  }
}

<body>
  <div class="center">
    <div class="content">
      <h2>HELLO</h2>

      <div class="card-layout">

        <div class="card">
          <h2>Some random information.</h2>
          <div class="subtext">
            <p class="secondary-text">this is some subtext under an illustration or image</p>
          </div>
        </div>

        <div class="card">
          <h2>Some random information.</h2>
          <div class="subtext">
            <p class="secondary-text">this is some subtext under an illustration or image</p>
          </div>
        </div>

        <div class="card">
          <h2>Some random information.</h2>
          <div class="subtext">
            <p class="secondary-text">this is some subtext under an illustration or image</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>