In the HTML and CSS snippet below we have two divs with a class called "inner". Both these divs are set to
display:inline-block; and hence they should display next to each other and not on top of each other. So why do they display on top of each other?
box-sizing is set to
border-box. Both inner divs are exactly 200px even with the 1px border and their parent is exactly 400px.
See this post on StackOverflow. Thanks to everyone who contributed.