Marking up the holy grail layout in HTML

- In the exercise files for Chapter 4, under 04_02,…you will find holy-grail.html,…and holy-grail.css.…These are the two files we will be working with…to create our Flexbox based Holy Grail layout.…Just like in the previous movies,…we'll start by looking at the mark-up…in holy-grail.html.…And if you look from the top, you'll see…this looks pretty much like the other demo pages.…When we scroll down, there are a few notable differences.…You'll see here, before we get to the header…with the class "masthead," I've added a new div…with the class "outer-wrap."…And this div will wrap around all the content…on the page, and will be the baseline…that we're going to be using for our Flexbox based layout.…

Within "outer-wrap" we have three main sections:…we have a header with the class "masthead,"…then we have a div with the class "content,"…and then, finally, we have a footer…with the class "footer-area."…Within each of these main content sections,…we have further divisions.…So, for instance, in the header, we have a…div with the class "site-branding,"…