OL missing numbers

This is going to seem like a stupid question and is basic html but I'm going to ask it anyway. I've seen a few posts that ask this similar question and its not helping fix my issue. I'm working off my local server for testing. I have this for my syntax.

<div id="top5">

            <img src="images/top5.png" alt="Top 5 Rankings" />

            <ol>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li cla开发者_如何学JAVAss="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
            </ol>

        </div>

However it is not putting the numbers for the ordered list and just seeing if anyone can see my problem. This is what I have applied to the rendered page in my css:

li.top5rankings {
color: red;
display: block;
text-align: center;
}

styles.css (line 103)

* {
    margin: 0;
    padding: 0;
    }

styles.css (line 4) Inherited from ol

ol {
    list-style-position: inside;
    list-style-type: decimal;
}

If you're using any kind of css-reset stylesheet, it's likely that the list-style-type has been removed, or the margin has been set to 0. Try:

ol {
    margin-left: 2em;
}

ol li {
    list-style-type: decimal-leading-zero;
    list-style-position: outside;
}

JS Fiddle demo

It's also worth noting, as @Fredrik does in his answer, that the display property might be causing problems. For list-elements the default is:

display: list-item;

Try removing display: block; so that your css becomes like this instead:

li.top5rankings {
  color: red;
  text-align: center;
}