Inconsistent outer spacing between components

[sergioalvz]

Hey folks 👋,

I see there are some inconsistencies in components about horizontal spacing. That's especially noticeable when looking at components in narrow screen sizes. For example, the SectionIntro component uses a padding-block property that makes it have some horizontal space in narrow screens, while the River or the FAQ, for example, will be touching the screen's borders.

Right now, I'm applying some custom padding for both River and FAQ to create a consistent experience, but I think it would be great if we could make all components behave the same.

[rezrah]

Primer Brand maintainers will follow up on this by performing an audit of existing components that contain internal padding, with a view to replace with new Grid component.

[josepmartins]

Adding more examples, this time about managing vertical spacing:

Slack thread: https://github.slack.com/archives/C04E44ZPNEA/p1683546014522099

[sergioalvz]

Adding one more example. The River component ensures some outer spacing, but Testimonial and FAQ components do not work well together without additional CSS: