Center text with white-space: nowrap;-CodePudding

I'm trying to center my title so I used white-space: nowrap; so it didn't stack and it appeared in one line but now it won't center. So there is the CSS code for the title and the appearance of it is fine, the only problem is that, instead of appearing centered, it starts from the center, and it keeps going right. So like, instead of " Meet The Seekers ", it does " Meet the Seekers"

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 >
  <h1 >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>

CodePudding user response：

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

You may remove the display property and add text-align: center, so it will be centering 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;
}

<div >
  <h1 >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>

CodePudding user response：

just use text-align:center

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

<div >
      <h1 >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>