Why are the 1st and the 5th containers in my Webflow 101 course not taking the full width of the viewport as they did before?
TL;DR
- Check the 1st and 5th containers and their parent elements for max-width, padding, margin, or display settings that restrict full width.
- Inspect shared classes, Symbols, and layout properties (like flex or grid) to isolate and fix styling constraints.
If the 1st and 5th containers in your Webflow 101 course project are not expanding to full width, a few style or structural changes may be restricting them. Here's how to pinpoint and fix the issue.
1. Check for Max Width or Padding Restrictions
- Select the 1st and 5th containers in the Designer.
- Look in the Style panel for any
max-width, padding, or margin settings that limit the width. - Common culprits:
- A
max-widthof940px,80%, or similar - Padding on the sides (left/right)
- A parent element (like a section or div) that limits width
2. Inspect the Container Class or Symbol
- If these containers use a shared class, modifications to the class may unintentionally affect width.
- If they’re part of a Symbol, changes inside the Symbol affect all its instances.
- Hover over the class name to see where else it's used.
- Try duplicating and renaming the class to isolate styling.
3. Review Display and Position Properties
- Make sure the containers are set to
display: blockorflex, notinlineorinline-block, which won’t expand full-width reliably. - Unusual
positionsettings (absolute,fixed) may also take the element out of normal flow, affecting width.
4. Examine Parent Elements
- Select each container’s immediate parent and check if it imposes width limitations.
- If inside a grid or flex container, check if the column or flex item has custom sizing rules.
- A
section,wrapper, ordivmight use a layout constraint you're unaware of.
5. Revisit Recent Style Changes
- Open Webflow’s Style Manager or hit
Cmd + Z(Mac) /Ctrl + Z(Windows) to undo recent changes. - Also check site styles or global classes (
Body,Section,Container, etc.) for changes that cascade down.
Summary
To fix the containers not expanding full width, inspect both the container and its parent elements for max-width, padding, or display constraints, and make sure no global class changes are unintentionally affecting only the 1st and 5th sections.