Lodestar: Wide width Columns block content in a Full Width Group block is over flowing

[devNigel]

Quick summary

With the Lodestar theme, when the Columns block in a Full Width Group block is set to Wide Width, the content inside Columns block overflows.

Steps to reproduce

1. Switch to Lodestar theme.
2. Make sure there are no sidebar widgets on the site.
3. Create a new template with the default template.
4. Add a Group block, set it to Full Width.
5. Add a Columns block with 1 or more columns. ( 3 columns will help to see the issue clearly. )
6. Set the Columns block to Wide width.

What you expected to happen

The live page content should be wider like it is set in the editor block settings, but it shouldn't overflow.

What actually happened

The live page content overflowed on both sides.

Context

User report: 31694299-hc Follow up: 4328967-zen

Operating System

No response

Browser

No response

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Lodestar

Other notes

Screenshot:

How it looks in the editor:

On inspecting the CSS, I found that the class .align-wide has max-width of 1000% which I find odd. The issue is not there if it is changed to 100%. I wonder if this is a typo.

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, easy to implement

Workaround details

The user will have to disable the Wide width setting in the Columns block.

[kathrynwp]

Possibly related in 35058856-hc - when Full Width was set on a Group block, it overflowed the edges of the screen. Switching the Wide solved the issue.