Navbar background filling screen width, whilst all content within min-width and max-width values

Question

I'm creating a fluid website design and am specifying min-width and max-width values, however, I'd like the navigation bar background to extend from one side of the screen to the other (not be constrained by the max width), whilst keeping all of the <li> elements in it and all other screen content within the specified widths.

Furthermore, I would also like to set a minimum margin for the page (eg 16px) so that there is always a gap between the content and the edge of the page.

Ideally as in the image below:

What's the best way to go about containing everything inside the min-width and max-width values, whilst allowing the navbar background to stretch to the screen width. Also, is there a way I can use margin-left: auto and yet keep a minimum margin value? Whenever I've tried to do this I can only get one or the other.

Thanks for any help in advance.

Answer 1

有几种不同的方法可以做到这一点，但这个jsFiddle说明了我将如何做到这一点： http ： //jsfiddle.net/joshnh/UDwcp/