I've noticed that preview doesn't include styles configured in the screen layout/skin (multiscreen HTML5 for me), which makes sense as you might have different layouts for different outputs, and this isn't displayed in the preview. So there might be some styles configured there which affect the compiled output.
For example, in my preview, the first digit of double-digit numbered lists fall off the left side of my preview, but display the correct distance from the edge of the topic area because of the margins and padding defined in my screen layout.
Two things here. First the appearance of lists will vary in different browsers, you have to settle for something that is acceptable in the browsers you most want to support. Second, your styles include WD_***. That suggests a Word import. Try removing the class to see if that helps.
See www.grainge.org for RoboHelp and Authoring tips
Just to add, the HTML is invalid. The correct structure should be:
I’m also thinking that the HTML looks like it’s got inline CSS formatting – but I could be mistaken