Responsive spacing issue on Education site

[vishitshah]

On mobile/responsive view, the The Initiatives section on the WordPress Education ( ​https://wordpress.org/education/ ) has inconsistent left and right padding compared to other sections on the page. The content appears too close to the edges, which affects the overall alignment and readability.

Steps to reproduce:

1. Open the page on a mobile device or responsive mode.
2. Scroll to the The Initiatives section.
3. Notice the left/right spacing inconsistency around the heading and content.

[dd32]

FYI @piyopiyofox as the last editor of this page. No, I don't really know the best way to fix this, I don't know if it's the content, or if this should be filed on ​https://github.com/wordpress/wporg-main-2022/ as a CSS issue

[beaubhavik]

Hi, I tested this on mobile responsive view (iPhone 12 Pro).

The Initiatives section on ​https://wordpress.org/education/ has inconsistent left/right padding compared to other sections on the page.

This appears to be a CSS padding issue on the block container. The section's wrapping .wp-block-group is missing consistent
padding-inline that other sections have.

Suggested fix:
Add matching padding to that section's container:

padding-inline: var(--wp--style--root--padding-right, 1.5rem);

This can also be corrected from Site Editor → Group block → Dimensions → Padding to match adjacent sections.

Happy to test a patch if needed.

[softglaze]

Reproduction Report

Reproduced and measured. The cause is an inline padding override on the block, which answers @dd32's question in comment:1 about whether this is content or CSS.

Environment

• Browser: Chrome 151.0.7922.174 (64-bit)
• OS: Windows 11 Pro N, build 26200
• Page: ​https://wordpress.org/education/
• Widths tested: 390 (iPhone 12 Pro) and a wider desktop viewport
• Date: 22 August 2026

Steps taken

1. Loaded the page and measured the distance from each heading and paragraph to the left and right edges of the viewport.

const w = innerWidth;
[...document.querySelectorAll('main h1, main h2, main h3, main p')].forEach(el => {
  const r = el.getBoundingClientRect();
  if (r.width > 0) console.log(Math.round(r.left), '|', Math.round(w - r.right), '|', el.tagName, '|', el.textContent.trim().slice(0,34));
});

2. 🐞 Bug occurs. At 390 wide, every section heading sits 20px from the left edge except one:

20 | 20 | H2 | About
20 | 20 | H2 | Our Mission
 0 |  0 | H2 | The Initiatives
 0 |  0 | P  | WordPress Education offers three core initiatives...
20 | 20 | H2 | See what's happening across initiatives
20 | 20 | H2 | Join the Movement!

The Initiatives section is exactly 20px closer to both edges than every other section on the page.

3. Repeated at a wider desktop viewport. The same 0 against 20 difference is present, so this is not confined to a mobile breakpoint.

Expected result

• The Initiatives heading and body should sit at the same horizontal inset as the sections above and below it.

Additional Notes

On whether this is content or CSS. The wrapping group carries an inline style attribute that zeroes the horizontal padding:

min-height:0px;
padding-top:var(--wp--preset--spacing--70);
padding-right:0;
padding-bottom:var(--wp--preset--spacing--70);
padding-left:0

Every other section on the page is a .wp-block-group.alignfull with padding-left: 20px and padding-right: 20px computed from the stylesheet. This one overrides both to 0 inline, which is why it alone sits flush.

Since the override is inline on the block rather than in a stylesheet, this looks like a content fix in the Site Editor rather than a CSS change in wporg-main-2022. Removing the explicit zero horizontal padding on that group should let it inherit the same 20px as its neighbours. That matches what @beaubhavik suggested in comment:3.

One detail worth noting for whoever fixes it. The three initiative cards inside that section measure left: 42 at 390 wide, so they already carry their own inset and are not affected by the group padding in the same way. Restoring the group padding will shift them too, and it would be worth checking they still look right afterwards.

Screenshots/Screencast with results

• 8247-measurements-and-inline-padding-override.png, at 390 wide. Shows the per-element left and right measurements, with the surrounding sections at 20 | 20, and the full inline style attribute on the Initiatives group with padding-right:0 and padding-left:0.