title: Strange location of sub level list bullet
body: <p>I have a list of multiple nested unordered lists - up to seven nested lists. If the text of the list items breaks into two lines, the bullet is no longer vertically aligned. How can I fix this? <a href="http://jsfiddle.net/5kr8qqjh/4/" rel="nofollow noreferrer">See example here</a>.</p>
  
  <p>the issues are marked with red. I haven't been able to fix it using <code>:pseudo elements</code> either...</p>
  
  <p>See image: <a href="https://i.stack.imgur.com/oG2WU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oG2WU.png" alt="enter image description here"></a></p>
  
  <p>Any ideas?</p>