I recreated the first row of sections for my mockup, but I need to add a second row too. This should be easy, right? Let's check it out.
I pasted the code for my third and fourth sections into my main tag so that I have four total sections, just like in the mockup. But look at what rendered in my browser, all of the sections are in one row instead of two. And they're a little small.
Remember, a Flexbox displays like block, so it takes up 100% of the width of its parent. But here's the problem. Each section inside of the main has a width of 45%. This adds up to more than 100%. So main, my Flexbox has to scale down the size of its children so that they fit in one row.
It looks like one Flexbox won't cut it, I'll need to add a new tag called a div. A div can be wrapped around all kinds of different content because its only purpose is to give content a specific set of styles. For example, all the wrapped divs around each row have sections so I can turn them into flex boxes. I'll change the main selector to a div selector in my CSS. Now my two divs display flex. Since the divs are flex boxes, the sections sit side by side, like planned.
These aren't like the other tags we've learned so far. The other tags we've learned are used for very specific content. A header holds introductory content. A heading starts a new section. Strong tags hold urgent text. This makes it super easy to read an HTML file because we know exactly what each piece of content is about. Divs on the other hand, don't describe their content at all. We just use them to hold content and style it. We want to keep our HTML nice and readable. So only use divs when you absolutely have to