Hej,
I am doing the Webflow 101 course and don’t understand why the 1st and the 5th container is not taking full width of the viewport. At the beginning of the course it was not like this.
Thank you very much for your help!
Best, Sue
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi Sue,
you have nothing specifying a size on any of the sections, only to restrict them to 1100px. As a result, the sizing is coming from the content inside the sections.
Set the section width to 100% and they’ll fill the available space.
Ah, ok, thank you soooo much Matthew for this as I am real starter 
Welcome to the community @susannf!
In addition to what @Mathew_Killen mentioned, it’s also the display: flex property you’ve got on your Body class that’s causing them to not take up the full width:
Even without the max-width property on the Section class, you’ll find that these elements are “contracting” to only the width of their children components:
If you want to keep the Body class display: flex, then you’ll want to use the stretch flex align property so that the children elements can take up the full width:
Just as a note though, with the children elements “stretched” you’ll need to manually center elements (like your Navbar class) by toggling the center element button within the spacing dropdown header — which just adds a left and right margin of “auto”:
Thanks so much, dear Mike!
Hej Mike,
just to understand you right, I got it hopefully right that there a different options for the display of the body.
But from your practical experience do you rather advice to use the display option “block elements” for the body?
Thanks again,
Sue
I normally keep the body element unstyled myself (outside of global tag styles) but all of my projects use Finsweet’s Client-First method. This gives me a page-wrapper class as my “root” element (just below the body) as well as a main-wrapper class as a child of the page-wrapper that holds all the primary page content outside of the nav and footer elements:
Unless I’m needing to control everything on a specific page — including the header and footer — I’ll use the main-wrapper as the element that contains styles like display: flex.
It’s been a while since I’ve taken a peek at the Webflow 101 course so I’m not sure if they mention changing the display of the body, but in web development, there are tons of ways to accomplish the same goal. I would personally structure my page differently so I can style the main content with flex without changing the body style, but for someone just starting out it’s not necessarily the “wrong” choice.
Hopefully that answers your question, but don’t hesitate to reach out if you have any others 
Hej Mike,
to separate the navbar and the footer from the main part makes totally sense to me.
As I am real newby may I ask whether the Finsweet’S Client-First method is accessable for all people or do they have a paywall? From a short look I didn’t find the answer.
Do you recommend this method to Webflow starter? Don’t worry, this is probably discussable, but I just want to hear your opinon 
Thank you so much again!
Susann
Most of what Finsweet offers is free for everyone with only a small portion locked behind their Plus membership. Their other “flagship” offering is Attributes which I use — in some capacity — on nearly every site I build.
Client-First is simply a methodology of developing Webflow sites that not only help organize your site structure but also make it easy to pass on to clients or other developers that use it. It differs a bit from how Webflow structures things in their lessons, but it’s really not difficult to implement and there is great documentation. It also works super well alongside their (free) Chrome extension to allow for a “folder” visualization of your classes which can come in handy as projects get larger:
I’d probably recommend starting with their cloneable instead of trying to retrofit older projects (unless they’re small) as the latter is a bit more time-consuming.
Overall I’d say it’s a fairly popular way of structuring your Webflow sites and is the same method used by both Relume and GridUp in their component libraries.
Wow, thank you so much for your incredible help.
As a starter it is so difficult to figure out what are the first steps.
So I look first into “clonables”, afterwards I will have a glance at “attributes”.
PS: “Attributes” is a similar product compared to “Relume” or GridUp", correct?
Of course, glad I could help! 
Relume and GridUp are component libraries — these are pre-built section layouts that can help speed up building the structure of your project. Those are two popular options that use Finsweet’s Client-First, which is beneficial if you’re planning on using that methodology for all of your projects.
Webflow somewhat recently launched a Libraries section in their Marketplace that includes a number of alternatives so I’d recommend taking a peek and/or trying some of them out to see how they work:
Finsweet Attributes is a Javascript library that allows you to add more complex functionality to your project by using HTML attributes. It expands on Webflow’s limitations around things like filtering and CMS functionality but it’s a little more advanced for newer users. That said, most solutions are completely free and the more projects you make the more you’ll probably find yourself looking for workarounds that Attributes solves.
Hopefully that helps and happy Webflowing! 
Thanks Mike, now I have a lot of input, I am still at clonables.
We’ll see when I get to one of those 3-4 mentioned libraries
Very thankful!
