What could be causing the flexbox on the main home page and the "Leasing" page in Webflow to not stack properly and have a white margin on the right div block? I have tried multiple solutions, but nothing seems to be working. Could you please take a look at my site Read-Only and advise on what I might be doing wrong?

Flexbox misalignment and unwanted white margin on the right side in Webflow usually stem from layout settings, overflow issues, or extra padding/margin on child elements. Here's how to identify and fix common causes.

1. Check Overflow and Width Settings on the Body and Parent Containers

• Select the Body in your Navigator panel.
• Make sure Overflow is set to "Visible" (or "Hidden" if overflow white space is needed to be clipped).
• Ensure the Body and major containers such as Section, Container, or Div Block are set to max-width: 100% or do not exceed the viewport width.
• Avoid using fixed widths (like 1500px) unless absolutely necessary.

2. Inspect Flex Parent Settings

• On your main Flex container (likely a Div Block set to Display: Flex), check:
• Flex direction: Use Vertical if you want elements to stack.
• Justify and Align settings: Try Start or Center instead of Space Between if spacing seems uneven.
• Ensure child elements inside the flex container do not have fixed widths or large margin-right.

3. Audit All Child Elements for Margin and Width Issues

• Walk through each direct child of the Flex container and:
• Look for any unwanted margin-right, padding-right, or fixed widths.
• Check for hidden elements or absolutely positioned items bleeding out of the container.
• If you're seeing a white space only on the right, one child might be too wide for the viewport.

4. Check for Hidden Overflow Elements

• Select all containers that could contain expanding items (like image sliders, custom code embeds, or extra animations).
• Set Overflow: Hidden temporarily on containers to test if content is breaking out.
• If the issue goes away, one of the child elements has a width or transform problem.

5. Inspect the Page on Tablet and Mobile Breakpoints

• If the stacking problem only appears on certain breakpoints, check each one:
• Inspect how the Flex settings change.
• Ensure Flex direction switches to Vertical if stacking is required.
• Unset any overridden widths introduced in mobile views.

6. Use Webflow's Preview Mode and Publish to Test Responsiveness

• Use Preview Mode and inspect in different device widths.
• Sometimes, bugs only appear on the live site due to default browser margin or missing reset styles.
• Publish the site and inspect live using browser DevTools to pinpoint the element overflowing.

7. Use DevTools to Locate Overflows

• In Chrome DevTools, use:
• Inspect > Elements tab.
• Add a temporary * { outline: 1px solid red; } via DevTools to catch which divs are overflowing the page.
• This is an effective way to discover the offending element stretching the layout.

Summary

To fix Flexbox stacking and unexpected right margin issues in Webflow:

• Ensure containers and body have correct width and overflow settings.
• Set Flex direction, child alignment, and inspect for extra margins or fixed widths.
• Use DevTools and Preview Mode to find elements pushing past the viewport.

If the issue persists after these steps, please share your Webflow Read-Only link, and I can pinpoint the issue directly.