Custom Grid - handles are off

Permalink
So I have a custom grid of 8 columns set up and running on my site. It works fine, changing the widths of the areas with handles work fluently, it does everything it's supposed to, but the handles are way off from where they should be. Check the attached picture to see what I mean.

I've seen similar posts in the forums, but none of them have given me an answer, since the grid I'm using doesn't use margins, just padding (like bootstrap), plus inline-blocks instead of floats. So e.g. the solution of changing the margins of the grid from left to right doesn't do the trick for me.

Here's the code:
.row {
  max-width:1200px;
  margin:0 auto;
  position:relative;
  font-size:0;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8 {
  display:inline-block;
  font-size:15px;
  padding-right:10px;
  padding-left:10px;
  position:relative;
  vertical-align:top;
}
.grid-1 { width:12.5% }

1 Attachment