The content of your #navbar
is wider than the width you have given to the #navbar itself.
#navbar would be 16em+2px = 258px (at a font size of 16px), while the content would be 20em+2.5em+2px = 290px (at a font size of 12.8px).
And since the #navbar has display:table
, its own width will adjust itself to the width of its children rather than let the content overflow out of its boundaries. Tables do that.
So, calc(100%-17em)
for the remainder doesn't make it. Either calculate a smaller width, or, since the navbar has float:left
anyway, you can leave out the width altogether! Simply set the left margin if desired and you're done.
See Fiddle.