Unable to center text with CSS + HTML - html

Question

I am trying to center my text with CSS and HTML. I'm really new to web development and so am just getting started. I watched a course on the basics (made the first page) and now I'm working on my own project (the other pages)
* {
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>
However, it simply will not center! I've spent hours researching it so I've finally come here for help. I've attached an image of what it looks like:
All I want is for it to appear central) - horizontally at least!
How am I supposed to achieve this (note that the section is the second)? Thanks.

Answer 1

You have uneven padding in your section. You need to provide uniform values like padding: 5rem 0; so that the spacing is even in the entire section
You have used grid-template-columns: 1fr 1fr in .our-news which tells that there will be 2 columns inside the container which occupies equal space. So you need to change this line to:
grid-template-columns: 1fr;
You gave a margin bottom to heading-secondary. Remove that line so that there won't be any unwanted spaces below the text.
Modified code:
* {
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;
}
<section class="second-page">
<div class="our-news">
<h1 class="heading-secondary">
Why buy through us?
</h1>
</div>
</section>

Answer 2

You can make it very simple with text-align: center. Without flex or grid.
* {
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;
margin: 0 auto;
}
.our-news {
text-align: center; /* only this one you need!*/
}
.heading-secondary {
font-size: 5.2rem;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -0.5px;
margin-bottom: 3.2rem;
width: 360px;
display: inline-block; /* make the block element to a inliner*/
}
<section class="second-page">
<div class="our-news">
<h1 class="heading-secondary">
Why buy through us?
</h1>
</div>
</section>