CODEWITHSUNDEEP
htmlcssalignment
Leon Gaban
Leon Gaban

Reputation: 39028

Text not centering in my li

Demo link

Not sure why my text in the 2nd list isn't getting centered.

enter image description here

The HTML

<div id="the_target">
    <ul>
        <li>Stephen Marston</li>
        <li>Account Exectutive</li>
        <li>The Company</li>
    </ul>
</div>

SASS:

section {
    #the_requestor {
        margin-top: 40px;
        ul { margin-top: 10px; }
        ul li {
            text-align: center;
            line-height: $px20;
        }
        li:first-child {
            font-family: LatoBold;
            font-size: $px30;
            background: cyan;
        }
    }
    #the_target {
        position: relative;
        margin-top: 40px;
        ul { margin-top: 10px; }
        ul li {
            text-align: center;
            line-height: $px20;
        }
        li:first-child{
            font-family: LatoBold;
            font-size: $px30;
            background: cyan;
        }
    }
}

Any thoughts on what could be forcing Stephen Marston to not center?

Upvotes: 5

Views: 322

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191749

There is an element being floated in #mobile-action-area that is interfering. You need to clear this float. There are a variety of ways to do it. Adding overflow: hidden to #mobile-action-area fixes it. You may also try:

#mobile-action-area:after {
    display: table;
    content: "";
    clear: both;
}

Upvotes: 5

Slavenko Miljic
Slavenko Miljic

Reputation: 3856

You'll need to clear the float before #the_target

   #the_target {
            position: relative;
            margin-top: 40px;
            clear:both;
    }

Upvotes: 2

Related Questions