Floats sind immer nur so breit, wie der in ihnen enthaltene Content Platz beansprucht. Es sei denn, dass ihnen ausdrücklich eine Breite zugewiesen wird.

Dein #content floatet und hat keine Breitenangabe. Wenn du nun möchtest, dass #content sich bis an den rechten Rand des #maincontainers erstreckt, hast du zwei Möglichkeiten:

1. #content bekommt - unter Beachtung des Box-Modells - die Restbreite ausdrücklich zugeordnet (bei dir: width: ...px)

2. Du änderst die Taktik, in dem du das Float aus #content ersatzlos herausnimmst und mit margin-left in der Breite der Navi ersetzt.

Beispiel: