There's a very simple fix. Just change the left
setting for the "..." pseudo element to 1em
.
.list li:after {
left:1em;
}
Update:
There was an issue with the location of the right number when the title is wrapped to a second line. It can be fixed by adding a class called "two-lines".
<li style="margin:0 0 .5em 0; padding-left:.6em;" class="two-lines">
<span>A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS</span>
<span class="number">1</span>
</li>
.two-lines {
text-indent:-.6em; /* This was already on the inline-style */
}
.two-lines .number {
padding-right: 0.8em; /* This is fixing the number's location issue */
}