I am a bigger fan of using top/bottom methods of creating hexagons, because they're just very simple. Check out the one I threw in your jsfiddle.
Just fix up the actual measurements and the method I used should get rid of your problem.
.hexagon{
margin-left: 8em;
height: 4em;
width: 4em;
-webkit-transform:scale(2.5, 2.5);
-moz-transform:scale(2.5, 2.5);
-ms-transform:scale(2.5, 2.5);
-o-transform:scale(2.5, 2.5);
transform:scale(2.5, 2.5);
position: relative;
}
.top{
top: 2em;
border-bottom: 2em solid black;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
}
.bottom{
top: 4em;
border-top: 2em solid black;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
}