Sections & containers are some of the most important boxes in web design. They organize & group your content topically, they're responsible for establishing the content width of your website, and they're responsible for creating an inline gutter on smaller devices.

In this tutorial, we're going to take a closer look at some important details related to sections and containers:

◉ The main semantic purpose of sections.
◉ Why almost all sections should have an inner container
◉ When should content be in a container vs not in a container
◉ How to manipulate the width of a container
◉ How different page builders handle the concept of a section element
◉ How to set default section padding
◉ Where the inline padding for your site's "gutter" should be set
◉ Two methods for adding vertical white space to a section
◉ How to set background colors and background images on sections
◉ Why you should never use a fixed height on sections
◉ Why you should avoid using margins on sections

To close out this training, I show you an example hero section build featuring a full-width background image, dark overlay, and a very traditional content layout with dual buttons as the call to action.

** MY TOOLS **

🔥 AutomaticCSS (ACSS) - https://automaticcss.com
🔥 Frames - https://getframes.io
See all my recommended tools here: https://geary.co/tools/

** INNER CIRCLE **

Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.

⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!

Learn more and join here: https://geary.co/inner-circle/

** SOCIAL **

👉 FB -   / marketingkev  
👉 LinkedIn -   / kevingeary  

** CHAPTERS **

00:00 Intro
00:43 Section & Container Overview
04:01 How Page Builders Handle Sections Differently
10:00 The Semantic Value of Sections
12:06 Establishing a "Gutter" For Your Website Properly
17:46 Overriding Container Width
20:06 Setting Default Section Padding
23:54 Background Colors & Images
26:36 Vertical White Space in Sections (Method #1)
29:28 Vertical White Space in Sections (Method #2)
32:40 Min-Height vs Fixed Height
34:20 Avoiding Margins on Sections
37:19 Example Hero Section Build
48:10 Outtro