Ich versuche, Text mithilfe von CSS und HTML zu zentrieren. Ich bin sehr neu in der Webentwicklung und fange gerade erst an. Ich habe mir den Grundlagenkurs angesehen (die erste Seite erstellt) und arbeite jetzt an meinem eigenen Projekt (andere Seiten)

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  /* font-size: 10px; */
  font-size: 62.5%
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #FFFFFF;
}

.second-page {
  background-color: #04041af9;
  padding: 4.8rem 0 9.6rem 0;
}

.our-news {
  max-width: 130rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9.6rem;
  align-items: center;
}

.heading-secondary {
  font-size: 5.2rem;
  font-weight: 700;
  /*line-height: 1.05;*/
  align-items: center;
  text-align: center;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  margin-bottom: 3.2rem;
}

<section class="second-page">
  <div class="our-news">
    <h1 class="heading-secondary">
      Why buy through us?
    </h1>
  </div>
</section>

Aber es wird überhaupt nicht zentriert sein! Ich habe stundenlang recherchiert und kam schließlich hierher, um um Hilfe zu bitten. Ich habe ein Bild angehängt, wie es aussieht:

Ich möchte nur, dass es in der Mitte erscheint – zumindest horizontal! Wie soll ich das erreichen (beachten Sie, dass dieser Teil Teil zwei ist)? Danke.