Why is text-align center is not in herited for this element?

Question

I need to align "OUTDOOR" word to center , pls help, i m new to CSS. for what i have tried,the "outdoor" is aligned to left , eventhough "Is where life happens" aligns center.

//here is my html part

<div class="header__text-box">
            <h1 class="heading-primary">
                <span class="heading-primary--main"> outdoor</span>
                <span class="heading-primary--sub">is where life happens</span>
            </h1>

// here is the css parent element

.heading-primary{   
                
                color:#fff;
                text-transform: uppercase;
                margin-bottom: 6rem;

}

here is the child elements

.heading-primary--main{
                    display: inline-block;
                    font-size: 5rem;
                    font-weight: 500;
                    letter-spacing: 3.5rem;
                      
                }
.heading-primary--sub{
                display:block;
                font-size: 1.6rem ;
                font-weight:800;
                letter-spacing: 1.35rem;

}

Does this answer your question? [How to horizontally center a
](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — ricky3350, Jul 03 '20 at 00:52

score 0 · Accepted Answer · answered Jul 02 '20 at 22:13

The reason your text is not fully centered is because of the letter-spacing. The letter-spacing property also adds spacing after the last letter, making it so your "Outside" text does not appear centered. I figured this out by highlighting your text and noticing that there is extra spacing after your last letter. To fix this, you can add

margin-right: -YOURLETTERSPACING

to the element with the letter-spacing property to negate the extra space at the end. In your case (as shown below), I added margin-right: -3.5rem since your letter-spacing is 3.5rem for your main class and I did the same for your sub class (with margin-right: -1.35rem). Does that leave you with any questions?

.heading-primary{   
                
                color:#000;
                text-transform: uppercase;
                margin-bottom: 6rem;
                text-align: center;
}
.heading-primary--main{
                    display: block;
                    font-size: 5rem;
                    font-weight: 500;
                    letter-spacing: 3.5rem;
                    margin-right:-3.5rem;
                }
.heading-primary--sub{
                display:block;
                font-size: 1.6rem;
                font-weight:800;
                letter-spacing: 1.35rem;
                margin-right:-1.35rem;
}

<div class="header__text-box">
            <h1 class="heading-primary">
                <span class="heading-primary--main">outdoor</span>
                <span class="heading-primary--sub">is where life happens</span>
            </h1>

Why is text-align center is not in herited for this element?

1 Answers1