If you have a class of section, there we will apply your base padding. Okay, so now let me remove it from the header. I extracted all of the header CSS from the last episode into this file, mostly to keep today's episode nice and tidy. You don't have to do that. All right, so if we come back and give this a refresh, we've lost all of our padding and we can manually add it back in. So here we'll opt in and say that's our section. And then down here, let's do the same thing. Okay, so now we have the same amount of padding for all of our containers.

And then down here, let's do the same thing. Okay, so now we have the same amount of padding for all of our containers. Let's begin with our four boxes. So here we'll have some callout text, and we did say we want four of them. Okay, so if we come back and give that a refresh, this is what you'd expect, right? The default display for a div is block, so it's going to display as a block, basic common sense. However, if we want it to display in a row, well, let's use flexbox. So I'm going to grab all of this and wrap it within a div, and I'm going to create a utility class here called flex.

So I'm going to grab all of this and wrap it within a div, and I'm going to create a utility class here called flex. Utility classes can be incredibly useful. They're a bit controversial, but I think you're seeing the tides change toward using them rather than away from using them. A utility class is a simple class that maybe isn't the most semantic thing in the world, but it helps you build up the styling for your components. So you might have a utility class called text-center. It doesn't describe what this element is, but nonetheless, it's incredibly useful. That's a utility class.

It doesn't describe what this element is, but nonetheless, it's incredibly useful. That's a utility class. So in this case, let's come back here and we'll create one called flex, and all that's going to do is set a display of flex. You want your utility classes to be as minimal and basic as possible so that they can be reused anywhere. If you suddenly add a background color of red, well now, any place where you want to opt into this functionality must also opt into a background color of red, which of course you don't want. Okay, but anyways, we've now wrapped all of those divs within a parent with a class of.

That's why you should learn this. So let's come back. Let's get back to work. Now, let's name these. Call is fairly common. And in this case, since we do have kind of a grid wrapper, why don't we give this a class of row. And again, this is fairly common. All right, so here we'll say flex, but also row to be a little more clear. And then we'll add another one here called column, and that will have a flex of one.

And now, your box can be styled exclusively. Now, if we bump back up to our column, there we can apply some padding. And that will give us each of these structures here where we have some space between the two. All right, so let's keep working on this. Back to app.css, we're now going to have padding of 10 pixels all around. And then we also set up a box element. We'll steal that. Like so. So come back and give that a refresh.

All right, so we want these to be vertically and horizontally centered. And this was always tricky in CSS. If you come from the 2005 days, man, you were looking it up. You were Googling for 20 minutes to figure this out. But now take a look. Yes, on the row, we have a display of flex. But in our box, we're going to do the exact same thing. Even a flexed item can also be its own flex container. All right, so let's say a display of flex. Now you already learned about justify-content to the center.

Hopefully we'll have a chance to talk about that. But until then, just keep it in mind. Yeah. So now we added three properties here, and we have perfectly centered text. So you may remember in the old days, you did stuff like this where, well, if you have a height of 100 pixels, you set the line height to 100 pixels to match. And then you would do text-align: center;, and you'd get the same thing. And that sounds great until you have something like this. So let's grab that. We'll add three <p> tags here.