Center align text without wrapping

Question

I was trying to center my title so I used white-space: nowrap; so it doesn't stack and appears in one line, but now it won't center. So you have the CSS code for the title, and it looks great, the only problem is, instead of being centered, it starts in the center and moves all the way to the right. Like, it's not "meet the explorer", it's "meet the explorer"

My code snippet is:

.section-title {
  font-size: 4rem;
  font-weight: 300;
  color: black;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  clear: both;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  justify-content: center;
}

<div class="about-top">
  <h1 class="section-title">Meet the <span>SEE</span>kers</h1>
  <p>We are a team of young entrepreneurs, who decided it was time to modernize the way we search the web. A diverse group of unexpected talents came together to make SEE-Tool available to every web user.</p>
</div>

Answer 1

I'm not sure why you have justify-content: center in your code, since it doesn't do anything there. You also don't need inline-block because the span tag is not a block element.

You can remove the display attribute and add text-align: center so it will center your h1 tag.

.section-title {
  font-size: 4rem;
  font-weight: 300;
  color: black;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  text-align: center;
}

  
Meet the SEEkers
  
We are a team of young entrepreneurs, who decided it was time to modernize the way we search the web. A diverse group of unexpected talents came together to make SEE-Tool available to every web user.