This is just a simple explanation with no code.

So for example, if this first one has a bunch of lorem ipsum text, you'll see that the box on this side adjusts accordingly. But anyways, why don't I bring back some margin-bottom, just for an example. Okay, let's get rid of that to keep things kind of clean. And we'll do one more. What about the typical thing where you have like a sidebar and a main content? Let's give these a couple of class names to hook into them. I'll call this sidebar and main. And now I will say, well, the sidebar should have a flex-basis of 150 pixels. And then the primary section will have a flex-basis of, I don't know, 500 pixels.

Okay. It's actually very, very easy. Let's start by just setting some background colors to make this really easy to see. So for example, a sidebar will have background of yellow, main will have a background of blue, and then footer will have a background of pink, just so we can see the boundaries a bit more. Okay. Next, and by the way, why don't we switch to Sass? Okay. And I'll say h1, no margin to push that up.

But then, well, you know what, for the list item, we'll set margin on the top and bottom and nothing on the left and right. And then finally, for the anchor tag, we'll set a color of black, text-decoration of none. But when we hover over it, we will add the underline. And finally, why don't we set a display of inline-block here? Okay, so yeah, that should do the trick for initial setup. Now we can focus on things that actually matter. If we want to display this in a line, and we learned a little bit about this in the last episode, then we can just say display: flex. This should almost be second nature to you at this point.