This is is exactly the same as the previous fixed-width examples, but adds a NON-responsive viewport meta tag.

<meta name="viewport" content="width=1100">

On a mobile device, you should see that this totally fixes the problems with the previous fixed-width examples. It tells the mobile device exactly how wide to set the viewport (matching the fixed-width content) so that the 100% blocks exactly line up with the fixed-width content.

Again, fixed-width pages are still an important part of web development. Understanding how mobile device viewports work with respect to responsive pages and fixed-width pages is very important.