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 center, and it keeps going right. So like, instead of " Meet The Seekers ", it does " Meet the Seekers"
CSS code
.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;
}
HTML code
<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>