Inline-Block Elements with White Space Demo

initial code:

And the layout is shown below. Annoyingly,the last section jump to next line even we use the display:inline-block; .Why that happened?

How to removing Spaces Between Inline-Block Elements?

There are a number of ways to remove the space between inline-block elements, and some are more complex than others. We are going to focus on two of the easiest ways, both of which happen inside HTML.

The first solution is to put each new <section> element’s opening tag on the same line as the previous <section> element’s closing tag. Rather than using a new line for each element, we’ll end and begin elements on the same line. Our HTML could look like this:

Another way to remove the white space between inline-block elements is to open an HTML comment directly after an inline-block element’s closing tag. Then, close the HTML comment immediately before the next inline-block element’s opening tag. Doing this allows inline-block elements to begin and end on separate lines of HTML and “comments out” any potential spaces between the elements. The resulting code would look like this:

I prefer the second method because of the code pattern.
This knowledge point is from http://learn.shayhowe.com/html-css/positioning-content/