Wrapper CSS Solution

[00:00:00]
>> Jen Kramer: So now I'm going to go back up to the top of this web page. One of the things that you might have noticed about the particular layout of this website was that even here, just looking at the picture by itself, things don't go all the way to the edge of the screen here.

[00:00:15]
We have a little bit of space on either side, right? Okay, so we don't have lines going all the way to the edge of our browser window. We have a tiny little bit of space on either side. So what I did to make that happen was here in my styles,

[00:00:37]
>> Jen Kramer: Appear towards the beginning, I have this div with a class of wrapper. And that actually goes all the way around my particular document. All the way from up there, all the way down to the bottom. That's where that div closes. So it's one great, big, huge box around my entire webpage.

[00:00:54]
And that can be useful because then I can go ahead and do something like this. I can say .wrapper. And then I can say that we want to do a width of something like, let's say, 80%, something like that. And then we can say we want to center this on the page.

[00:01:16]
How would I center this on the page? Anyone remember?
>> off screen: Margin with 0 auto
>> Jen Kramer: Margin 0 auto.
>> Jen Kramer: Okay,
>> Jen Kramer: So that's going to go ahead and get this a little bit off the edge of the page. All right, remember we can put borders on this at any point in time.

[00:01:40]
If a border helps you to see what's going on, by all means, put a big border on this border. 5px solid red. I recommend ugly colors for these borders. You don't want them looking too pretty because you don't wanna remember to turn them off later. If you make them honking big and ugly, you won't forget.

[00:02:00]
>> Jen Kramer: Ask me how I know. Okay, so go ahead and do that.
>> Jen Kramer: Now you can see what's going on there pretty clearly. All right, so now we have a nice centered div here on our webpage.