I have all my divs centered with the left and right edges vertically aligned, but when I added the ul and li then my .nav started to have a background color that extends past the right hand edge. Any idea how to lock this down? max width doesn't prevent it from flowing outwards.

You should also set .container to 900px instead of 1000px, because that's how wide all the things inside it are.

You can remove almost all of the instances of float: left and margin.

Block-level elements (such as divs) will by default expand to fill the available width, so you don't need to specify width: 900px so many times. This isn't the behaviour if you float: left an element, but I've removed your instances of it.