How do I keep flex-wrap: wrap; property from causing list item bullets to overlap?

I have an un-ordered list who's list items I would like displayed as rows of two columns. I'm currently doing this like this:

HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS:

body > ul {
background: #aaa;
display: flex;
flex-wrap: wrap;
}
body > ul > li {
flex-grow: 1;
width: 33%;
height: 100px;
}
body > ul > li:nth-child(even) {
background: #23a;
}
body > ul > li:nth-child(odd) {
background: #49b;
}

The problem is the bullet of each list item is overlapping the previous list item (as you can see here: http://jsfiddle.net/L4L67/55/). How do I stop this from happening? I've figured out a messy solution adjusting the margins, but was wondering if there's an elegant fix for this?