lets say you have element with 300px width and two childs in it with 150px width, 0 padding, 0 margin and inline-block. Why they wont fit perfectly in one line? Same is with percentages. Someone can help, explain?
because they behave like words/letters as inline-boxes , and if opening and closing brackets of you tags do not touch each other , you have that space in between that shows up on screen.
Different ways to fix , but the easiest is from HTML code , where every browser will do the same.
Make tags touch themselves (as if you minify HTML code) or insert in between HTML comments