HTML aligns the lines after the first line flush with the bullet point (the dot) instead of the text. You can fix this with the class below.

text-indent property applies only to the first line of a text-block. So we first “pull” the first-line back along with the dot. Then we push the entire text-block including the dot with the margin-left property.

1
2
3
4
5
.fix-bullet-align {
    list-style-position: inside;
    text-indent: -1em;
    margin-left: 1em;
}

Related Posts: