First List Item inside CSS Multi Column Layout is offset

An annoying thing when using CSS Columns pops up every now and again:

• When having list items (<li>) inside the columns, the items in the first column are often times a bit off. This happens across browsers in Chromium, Firefox and Safari (current stable version from Thu 15. Dec).
• Setting the list items to anything but display: list-item gets rid of the issue – at the cost of not looking like, well, list items anymore. No bueno!
• Getting rid of the list items vertical margin migitates the offset as well.
  • The missing spacing between items can then be resolved by adding a single direction padding, in my a case padding-bottom did the trick.
• It’s not beautiful, but it gets the job done: list items are now evenly distributed