Solution 1 :

margin: auto is correct, but you cant center your absolute pseudo element like this, only with auto.
But if you set left: 0; and right: 0;, you are centering horizontally.

.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.text-center {
    text-align: center;
}



#meet-our-team .container h1 span {
    position: relative;   
}

#meet-our-team .container h1 span::after {
    content: '';
    width: 40%;
    height: 4px;
    background: red;
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    margin: auto;
}
<section id="meet-our-team" class="bg-black">
    <div class="container">
        <h1 class="l-heading text-center py-2">
            <span>Meet The Owner</span>
        </h1>  
        
    </div>
</section>

Solution 2 :

Hey you can also try the below code to achieve your goal
HTML

<section id="meet-our-team" class="bg-black">
    <div class="container">
        <h3 class="section-title text-center">
            <span>Meet The Owner</span>
        </h3>  
    </div>
</section>

CSS

       .section-title {
            font-family: 'Raleway', sans-serif;
            font-weight: 800;
            font-size: 25px;
            color: #333;
            text-transform: uppercase;
            margin: 0 0 40px;
            padding-bottom: 20px;
            position: relative;
            text-align: center;
        }
        .section-title.text-center:after {
            left: 50%;
            margin-left: -40px;
        }
        .section-title:after {
            position: absolute;
            content: '';
            width: 80px;
            height: 5px;
            background: #FF9933;
            bottom: 0;
            left: 0;
        }

Problem :

Hello I have a partial bottom yellow line under h1 text but I cant figure out how to put it in the middle. I am able to put this is in left but align center or margin auto is not working.

I tried playing around with this for about an hour and I cant figure this out. I saw some people giving the h1 span a specific width in pixels but Im trying to avoid doing this because I plan on making the text smaller for ipad and mobile.

.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.text-center {
    text-align: center;
}



#meet-our-team .container h1 span {

    position: relative;
    
}

#meet-our-team .container h1 span::after {

    content: '';
    width: 40%;
    height: 4px;
    background: red;
    position: absolute;
    bottom: -4px;
    left: 0;
    
    
}
<section id="meet-our-team" class="bg-black">
    <div class="container">
        <h1 class="l-heading text-center py-2">
            <span>Meet The Owner</span>
        </h1>  
        
    </div>
</section>

Comments

Comment posted by ruben005

This is perfect. Thank you.

By

Leave a Reply

Your email address will not be published. Required fields are marked *