Where is this extra space between divs coming from?

You're using display:inline-block so the white space between the elements is what you are seeing there. You can either remove the white space between the divs or use float: left instead.

To elaborate... if you're using display: inline-block do this:

<div></div><div></div>

Instead of this:

<div></div>
<div></div> // White space is added because of the new line

As Terminal Frost said, add float: left to the class, and remove display: inline-block. Additionally, add content: "." to the parent div container to fix the wrapping issue you'll have from doing that.

As Lucifer Sam said, display:inline-block will show you space between element if there are one.

The slution given is good:

<div></div><div></div>

But for element with large content, i personnaly prefer this solution of not having the white space between display:inline-block elements. This is what i do:

   <div>
       large content
   </div><!-- No space
--><div>
       large content 2
   </div>