I tried experimenting with different values of widths, and I think I know why now.
By setting the width of the container box to 300px and setting both #left and #right display: inline-block, you can see there is a space generated between the boxes.
This is because inline-blocks are treated somewhat like words, so there is a space generated between them.
The space causes the sum of the widths of the two squares to exceed 200px (because it includes the whitespace), causing the #right to overflow.
By editing the div elements in index.html so that there is no line break between the #left and #right divs, you can see the white space is gone, and now the two squares fit perfectly into the container.