This is due to the default
box-sizing[
^], which is
content-box
. The width you specify excludes the padding, margin and border. Your two boxes have 1px borders on either side, so their total width is 100% + 4px.
If you change the
box-sizing
to
border-box
, the width includes the padding and border, so your boxes will fit on one line.
*, :before, :after
{
box-sizing: border-box;
}
Example[
^]