Lost spacing between horizontal navigation menu items following PR 29465

[bobbingwide]

Description

On updating to Gutenberg 10.2.0 I noticed that the padding between horizontal menu items had been reduced to 0 pixels.
In PR #29465, there was a CSS change to packages/block-library/src/navigation/style.scss, that reduced the padding to 0;

.wp-block-navigation {
	// Normalize list styles.
	ul,
	ul li {
		list-style: none;

		// Overrides generic ".entry-content li" styles on the front end.
		padding: 0;
	}
}

The inline CSS overrides my theme's stylesheet.

What is the recommended method that enables me to style the menu for the front end?

Step-by-step reproduction instructions

1. Install Gutenberg 10.1.1
2. Using an FSE theme such as Fizzie or TT1 blocks style navigation links with a background colour and padding between the links.
3. Upgrade from Gutenberg 10.1.1 to 10.2.0
4. Notice the spacing between the menu items disappearing.

Expected behaviour

I should be able to style horizontal navigation menu items on the front end with spacing between individual items.

Actual behaviour

When I updated to Gutenberg 10.2.0 the padding was reduced to 0.
I don't know the correct way to resolve this.

Screenshots or screen recording (optional)

For more details see bobbingwide/fizzie#26

Code snippet (optional)

WordPress information

• WordPress version: 5.7
• Gutenberg version: 10.2.0 or higher
• Are all plugins except Gutenberg deactivated? No
• Are you using a default theme. I did recreate the problem using TT1 blocks
  but the problem was found with my Fizzie theme Nav menu items styling not as expected bobbingwide/fizzie#26

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome and Firefox

[bobbingwide]

TT1 blocks with the link's background colour set to white and padding-right set to 10px;

The same without the padding.

[bobbingwide]

I believe I've found the solution.

.wp-block-navigation ul li {
   padding-right: 4px;
}

This works beause the theme stylesheet comes after the block's inline CSS.
I didn't need !important. I just had to target the same selector as the inline CSS.

If this explanation is correct then the issue can be closed Invalid / Wontfix.

[jordesign]

I can no longer recreate this - so will close the issue as not-needed.