Question

Hi all i have an ordered list that is getting indented as the screen is getting wider. Each layer of list items is more indented than the previous.

Can anyone help. Heres my code

<div id="left-content">

        <div id="product-header">

            <h1 class="red-text">Gmail</h1>
            <h2>A google approach to email</h2>

        </div>

        <p>Gmail is built on the idea that email can be more intuitive, efficient, and useful. And maybe even fun. After all, Gmail has:</p>

        <ol class="features">
            <li>
                <img src="../IMAGES/google-storage.png" alt="google-storage">
                <p class="features-header">Lots of space</p>
                <p>Over 10275.525924 megabytes (and counting) of free storage.</p>
            </li>
            <li>
                <img src="../IMAGES/google-cancel.png" alt="google-cancel">
                <p class="features-header">Less spam</p>
                <p>Keep unwanted messages out of your inbox.</p>
            </li>
            <li>
                <img src="../IMAGES/google-mobile.gif" alt="google-mobile">
                <p class="features-header">Mobile access</p>
                <p>Get Gmail on your mobile phone.<a href="#">Learn more</a></p>
            </li>
        </ol>

    </div><!--  "left-content -->




 #product-header{
    margin-bottom: 1.225em;
}

#main-content{
    padding: 2em;
    width: 80%;
    margin: 0 auto;
}

#left-content{
    width: 45%;
    min-width: 18.75em;
}

#left-content p{
    font-size: .8125em;
}

.red-text{
    color: red;
}

.features li{
    margin: 0.625em 2.5em 1.25em 0;
}

.features img{
    float: left;
    margin: 0 1em 1em 0;
}

.features-header{
    font-size: : .875em;
    margin-bottom: .3em;
}

i have narrowed it down to the font size on the #left-content p.

Thanks to anyone who can help.

Answer 1

The unwanted behaviour is probably resulting due to the floating images being slightly larger in height then the text.

Try adding clear: both to .features li:

.features li{
    clear: both;
    margin: 0.625em 2.5em 1.25em 0;
}

You can find a very compact example here: http://jsfiddle.net/urE23/