How to shift List item to the rightwards of the page

How can I shift te list items to the rightward of the page.
I have written the following CSS but roman-numerals do not move along with the list items.
Only items move to the right.

.moveright { text-align: right; }
<h1>Characters</h1>

<h2>Middlemarch</h2>

<h3>George Eliot</h3>

<ol class="i moveright" id="middlemarch">

    <b><li>Dorothea Brooke</li></b>

    <li class="female">Celia Brooke</li>

    <li>Edward Casaubon</li>

    <li>Sir James Chettam</li>

    <i><li>Joshua Rigg</li></i>

    <li>Will Ladislaw</li>

    <li>Tertius Lydgate</li>

    <li class="female">Rosamond Vincy</li>

</ol>

I think the ā€œiā€ should be the value of a type property:
<ol type="i" class="moveright" id="middlemarch">

When I tried that, it moved along.
see: https://jsfiddle.net/ov1sLcye/

image

Thanks michaelsndr, it worked. :smiley:

1 Like