Yep, in that tutorial the instructor is using a layout system called Flexbox for that hero section - it is a layout mechanism that is part of the broader, overall “CSS” specification - which of course, Webflow has integrated into it’s IDE because they rock!
Warning: More general overview/tutor type of info:
Before Flexbox came along people more commonly used the “Float” method of aligning things and still do in many cases. You’ll notice that all pieces of html content have a default nature… which is generally to align to the left of where you put it on the page. Add a picture with no CSS styles applied, it will just sit to the left of the screen. Add a Heading or Paragraph with no styles? it will just sit to the left.
You’ll use CSS (adding styles) to “override” the default nature of things.
Pay attention to that line in the third link that says "Flexbox gives you precise alignment and stacking control for all the contents inside an element…"
Every website is just a bunch of boxes, with smaller boxes inside of one giant box (the body element). These general “all purpose” boxes are called “Divs”… You can use Webflow’s pre-built components for overall structure such as the “Section” element, or the “Container” element - or you can simply create your own by dragging/dropping Div’s onto the page.
I’d encourage you to pop open some sites, go to the “navigator” panel that shows the overall structure of the site (the boxes within the boxes). In this example you will see the body at the top, then more stuff inside of it (sections), then more stuff inside of those other “sections”…
Click on those individual pieces of content or html (in this case divs, buttons, headings, paragraphs, etc) and study the styles applied. If you don’t see any styles applied to something then it must mean it is coming from something higher up in the overall stucture (CSS stands for Cascading Style Sheets - which means styles applied to certain thing then will apply to everything inside of it’s box or “cascade” if you will down, like a little waterfall onto all the other elements inside of it’s own box).
It’s why you can make the paragraph element blue and make it 40 pixels tall on the Body element (the very top level element of your site) - and everytime you place a plain old paragraph element with “no styles” on your website, just drag/drop a basic “P” element, the default will be blue text at 40px 
Okay, for another example. See how I clicked on the “intro CTA” element in my screenshot? Why is that not stretching all the way across the page? The text is aligned left, but it’s not butted up against the left side of the entire page? That is the default nature right? Something must be controlling the content inside of that box to make it sit in the middle of the page like that…
Now look down into the left corner of the screenshot… It’s showing you a little “breadcrumb” structure of what stuff is inside of what boxes… The thing we clicked on is a Div called “Intro CTA”, it’s inside of a box called “Container”, which is inside of a box called “Section”, which is inside the “Body”…
The “Container” in this case happens to be a Webflow default or “pre-made” element that is just a box (just a plain old Div element) that has a Max Width setting applied - something around 960 px or so… and the left/right margins set to Auto (centers stuff that is not text, for text you can just use text-align
Now look what happens if I simply pull that box (Intro CTA) outside of the “Container” box? Everything just sitting to the left… like it should if I haven’t done anything to keep it from doing that
Now I just gave the “Intro CTA” box a width style - 500px - it’s still sitting left of the page though because that is what does by default. Just for clarity - we are very specifically talking about the box named Intro-CTA in relation to the box it sits inside of, more commonly known as it’s Parent Element. In this case Intro-CTA is a Child Element of the div called “Section” now. The “Section” by default has a max width of 100%… that basically means anything you put in it will stretch across the whole page - unless of course you give your element a width value of 500 px, then it will be 500 px wide. but it will still just sit left…
Just added a little Margin-Auto because it centers stuff. Boom our 500px box is now centered in the middle of our page
I know this wasn’t some kind of ground-breaking tutorial here but it’s the kind of thinking you’ll need to employ if you want full control over what your site looks like… It’s just a lot of studying up and playing around with stuff (not your site obvioiusly, open some “Read Only” linkes from the showcase mentioned earlier, or in the example provided above it’s the “Flexbox Game” link I provided that will pop open the designer…
Just check stuff out, study up, and practice… Wonder how those display properties sitting up at the top work? You can google it, it doesn’t absolutely have to come from Webflow - this is all basic html/css layout stuff used universally throughout the internet…
https://www.w3schools.com/
Another great place to learn very basic & fundamental stuff. Just click on “Learn HTML” or “Learn CSS”… Again, this stuff is universal - apply the same exact principles you learn at the link above to your Webflow site builds
)
