After some clarification on the 960px width example
In the video you set that main-header at 960px width. This is obviously relative to the monitor resolution you are working on? If you were displaying this example on an 800px width monitor then the 960px width header element would still look full width and not change is that correct? When you say "it only takes up 960px and not the full browser width" and show it at about 3/4 width is that because the machine you are showing this on has a browser displaying at 1320px width or similar?
Erik Krieg43,037 Points
In the scenario you mention, the 960px header will be larger than the 800px screen, so part of the header will be no be visible. This is because pixel are absolute units, and not relative like percentages.
I made a little demo for you with this codepen. Try resizing the browser window to be smaller than the header's width.
Thanks Erik most appreciated! And cheers for showing me codepen looks very useful I have a total use for it :-) Thats the thing with a sites maximum width and the maths of it I need to nail. I guess it is all relative to what the site's maximum width is when you begin building it? Then using % and things like @media to resize correctly for responsive design/different sizes.
My mac's maximum screen width is 1680px. So when I make your div 1660px (shaved 10px off each end) wide in codepen, it fits nicely, but of course on other monitors it can cause display issues (your cutoff example in codepen) and would not look good. At 100% width it is full width on everything and much more flexible. That's what confuses me sometimes as a "base" dimension, what maximum width is most popular for sites at the moment pixel wise?