Html code before list results in unaligned list in reading view

When I insert html code before a numbered or unordered list it breaks the list in reading view. Everything is unaligned.

For example:

Results in:

It’s just an example, I have the same problem when I use <span> for example.

It works fine when I remove the html code.
Maybe I’m doing it wrong, I hope someone has a solution.

That’s to be expected. Markdown won’t render properly inside of HTML tags. Seems ordered lists don’t render in Live Preview or Reading views.

See →

And a related recent post:

The <font> tag is depreciated and you should avoid it. If you need to style only those three sections in the note, I’d consider using a span class for each and the corresponding CSS.

1. <span class="arial"> Cthulhu is a cosmic entity created by writer H. P. Lovecraft. </span>
2. <span class="arial"> It was first introduced in his short story "The Call of Cthulhu", published by the American pulp magazine Weird Tales in 1928. </span>
3. <span class="arial"> Considered a Great Old One within the pantheon of Lovecraftian cosmic entities... </span>

and the CSS:

.arial {
  font-family: 'Arial';