I am working on the portfolio page challenge and I have run across a sticking point. In the example page, when the window size gets to a certain low value the center content (all his website pics, intro text etc) fills the entire width and the “body” (background) in no longer visible on the sides. I am trying to get mine to do it but can’t seem to get it to work. I tried this:
Thank you Randell, that is what I am looking for. It works pretty well, with one caveat! In the example page the margins gradually reduce as the screen approaches 1023px. The margins on mine instantly “snap” away when the screen reaches this size. (I changed it in the pen so you can see what I mean)
so it will only take up 80% of the screen width until your media query kicks in at a screen width of 1023px and then you specified 100%, so it pops to 100%. If you replace max-width:80%; with width:1023px; in your main class, then I think it will accomplish what you are wanting (which I am not exactly 100% sure I understand).
What I was looking for was this: As you gradually reduce the width of the window (by dragging a side) the amount of “body” showing around the main content would bit by bit reduce until the main content touched the sides of the window at which point it would match size with the window.