Text kann mit CSS + HTML nicht zentriert werden

Question

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.

Answer 1

1. 您的 部分 中的填充不均匀。您需要提供统一的值，例如 padding: 5rem 0; 以便整个部分的间距均匀

2. 您在 .our-news 中使用了 grid-template-columns: 1fr 1fr ，它告诉容器内将有 2 列，占用相同的空间。所以你需要将此行更改为：

   grid-模板列：1fr;

3. 您为 heading-secondary 提供了边距底部。删除该行，以便文本下方不会有任何不需要的空格。

修改后的代码：

* {
  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: 5rem 0;
}

.our-news {
  max-width: 130rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 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;
}

      

        

          Why buy through us?