I am struggling with getting my structure right for responsive behaviour.
I’m building a site with Bricks Builder (Hostinger hosting), and I’ve clearly gone down a messy path early on. It mostly works on desktop, but I’m now trying to clean things up for proper responsiveness.
My key confusion:
Some sections only behave if Section = flex + wrap
If I switch Sections back to display:block, the layout collapses (content hugs left edge, columns break, etc.). I cannot get them centred again.
I keep reading that Sections shouldn’t be flex, but without that mine look totally wrong
What I think Bricks expects:
Section (full width, padding, block)
Container (max-width constraint + flex if needed)
Content elements
I believe the correct work flow in terms of structure is
Section
Container
Block
Div
That I have seen noted elsewhere, I think even in the official documentation.
Worked well for me. I noticed that when not sticking to this layout, that things break, the layout is not working, things may disappear or show in wrong locations or not work on mobile. Particularly loops will break.
I think it would be a good idea for you to take a look at our Academy and a few YouTube videos on the subject. That could really help you to understand the basics.
I use the section for the whole page, The container to divide my page, the block to manage my container and the div to fill the block.
I think it miss the tag « main » ( HTML main Tag ) to put on the section and I use the « section » tag for the container and the tag « div » for the rest.
About the css, I use flex for everything, depending on what design I want.
As a pirate, it’s your job to do pirate things
However, you should not forget that some HTML tags (e.g. the section) serve a semantic function: Semantics - Glossary | MDN
Same goes for the main tag, which you don’t have to deal with at all, because your main content (<main id="#brx-content">…) is already wrapped in it.
Divs, on the other hand, have no semantic function whatsoever, just like containers and blocks, which are ultimately just divs. What they do have, however, are default styles (flex, etc.) to enable common layouts without constantly reinventing the wheel/repeating yourself.
I believe this is more of a fundamental understanding problem, and that the resources provided will be very helpful because each shows the “right” way.
Of course, there are exceptions or other ways—but in order to pursue them, you need to have a certain basic level of knowledge or be willing to learn it. To return to the pirate analogy: without knowing how to sail, I would definitely have problems getting my sailing ship going, right?
I’ve re-watched the tutorial, which i had watched several times before. I think my big error was going from there to the Wilds of YouTube. Lots of people doing clever things, which i neither needed nor understood. And then mangling my way out. Or so i thought. Until i looked at mobile. Ooops.
Will go on a tidy-up mission now, making sure things only flex if i actually need multiple columns. And stop using sections for layout. And let defaults be.
Other bits:
Is there a recommended global content max-width that feels “safe”? (1200px, 1360px, 1440px)? Everyone in my niche will have huge screens, so i have been shooting for wide…..
Should i set margin-auto on containers globally, or only on the main layout container?
Above all, thanks for all taking the time to lead this (still very) Noob back to the correct path…..
5 hours later, i’ll put it here as a sort-of follow-up: edits show in the builder, but have no effect on the front-end. Which video have i misunderstood now?
Why do you have several containers in the section? One container is enough to ‘contain’ the content.
Sections can be whatever layout you prefer; that’s just how CSS works. When you set the section to display:block and everything collapses, this is because the section was originally centering items using the flex layout properties. The container should still be centered though; it’s odd that the content is hugging the left. Unless you mean the content outside of the container hugs left, which is intended behavior on a full-width element with a default display.
It’s definitely valid to leave sections as flex and will only bite you if you change your workflow. Bricks adds helpful styles for the beginners or people who like to have defaults out-of-the-box, but you can override them to fit your workflow.
Think of your layout elements as having a primary job. Section width/max-width should be left blank since it is representing a full-width wrapper by default; the width/max-width job is for the container. The granular settings are on you, but the defaults are not bad/wrong/hard-to-work-with. Start with a content-width of 1360px or 1440px; I find Bricks’ default a little small personally. And that just goes to show preference has a play in your decisions.
Your questions are really coming down to preferences and CSS understanding. When to set margin-auto outside of a container/center scenario is based on what you need; if you need an element to be centered in its containing box, use margin-auto. Stop asking questions before they are an issue; part of the learning process is using your active mind to find answers. And part is just trial-and-error. And of course the project will drive answers too.
In 2026, proper semantic layout follows a “Native First” approach, prioritizing standard HTML5 elements to meet strict WCAG 2.2 accessibility standards.
Inside your <main> element, you should organize content using a hierarchical structure of Sections, Articles, and Asides.
1. The Content Scaffolding
Avoid the Bootstrap-style “div soup.” Instead, use these elements to define the purpose of each content block:
<section>: Groups related content that typically shares a common theme and must include a heading (<h2>–<h6>).
<article>: Defines self-contained content that could stand alone or be redistributed (e.g., a blog post, a product card, or a forum thread).
<aside>: Contains content indirectly related to the main topic, such as sidebars, call-out boxes, or related links.
2. Heading Hierarchy
Maintaining a strict outline is critical for both SEO and screen reader navigation in 2026.
<h1>: There should be only one per page, typically representing the page title.
<h2> - <h6>: Use these sequentially. Never skip levels (e.g., jumping from <h2> to <h4>) just to achieve a specific font size; use Tailwind classes for styling instead.
3. Example 2026 Semantic Structure
This layout combines modern semantics with Tailwind’s utility-first approach:
