Why does my CSS ordered list ignore margin?

Question

Screenshot:

The image has a float:left attribute. As you can see the numbers for the ordered lists are too far to the left, but adding a margin-left:20px to the <ol> tag doesn't help. (Neither does adding it for the <li>s, by the way, but that would be bad practice anyway.)

How can I move my <ol> to the right?

Answer 1

You can control placement of bullet items with list-style-position property. Try this:

ol li {
    list-style-position: inside;
}

Check the demo for how it works:

.fixed ol li {
    list-style-position: inside;
}

<div class="demo" style="float: left; margin-right: 20px;">
    <h3>Without list-style-position</h3>
    <img src="http://lorempixel.com/100/100/food/2" style="float: left" />
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
</div>

<div class="fixed" style="float: left">
    <h3>With list-style-position</h3>
    <img src="http://lorempixel.com/100/100/food/2" style="float: left" />
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
</div>