Navigation submenu left padding introduced

Hi @dunnamana1 it looks like the submenu on https://yvonneg2.sg-host.com/donate-to-educate/? has the following CSS which is adding padding to your submenu.

ul.has-background {
   padding: 1.25em 2.375em; 
}

This CSS is not being rendered on the other page hence the difference in display, do you remember adding such CSS to your site?

Thanks for looking into this – I can’t see where this was set but I was delighted you could pinpoint it. I recently made this site into a twenty twenty two theme and have done very little work with lists so can’t think where this is being set up. I have checked additional css in customiser and the list in the global settings but not found anything. I also disabled plugins to see if there was a conflict. However, when I set padding: 0.25em 0.375em into the additional css it works a dream.

Even though it is working now I would like to hear where else I should look for the setting causing the issue so I can avoid in future. Thanks so much for helping with this, it is very much appreciated.

Hi @dunnamana1 it looks like this is actually a bug. If you have a submenu that has a background color, the unwanted padding is added on pages that have a list block. This was reported here:

https://github.com/WordPress/gutenberg/issues/49445

I’ve added your experience to the bug report, as a workaround for now I would suggest adding the CSS code below to your site.

.wp-block-navigation__container ol.has-background,
.wp-block-navigation__container ul.has-background{
padding:inherit;
}

.wp-block-navigation__container ol,
.wp-block-navigation__container ul{
box-sizing:border-box
}