Story:
The built-in block inserts the natural space between the elements. In fact, this is, in fact, the width of the space if you hit a space in your content or even typed (html markup space). This space will be smaller or larger depending on your font size .
There are several fixes to this problem, and I personally, like many others, consider this problem a kind of “mistake” that needs to be fixed. Nevertheless, all corrections for this are very "hacker", so to speak. The decision you choose depends on your personal preferences.
Recommended solution for each specific situation and code:
Just switch to using floats. Instead of setting display: inline-block; do the following:
http://jsfiddle.net/uhBW2/9/
.mainprogress div{ padding:0; margin:0; float: left; }
Other solutions:
(Note that in a JDFiddle solution using margin-left first div also moves to the left when it should not. To counteract this problem, you will need to implement a class on this first div and set this value to -4 0 for this div Another solution and my preferred solution would be to use the structural pseudo-class of the :first-child class to select this first div. It is more dynamic and does not require changing the HTML code.
*** Note for other developers: If there are other solutions, please write below and I will add it above. I feel like I'm missing a fifth way to fix this ...