Managed to fix the last visible bug in which when the browser window was at certain sizes a small gap between the right hand side of the menu and the main content area showed up.

I managed to fix this by changing:

ul#menu li {
padding: 0.3em 0.3em 0.3em 0.3em;

to:

ul#menu li {
padding: 5px 5px 5px 5px;

Evidently ems aren’t entirely consistent and it may have been a problem of it trying to round to the correct number of pixels but being just under. Pixels are more precise so this way is much better.