Button/grid horizontal padding question

Hi there,
I’m creating a set of jump links at the top of a page to take you to sections down that page. I want the jump links inside buttons at the top of the content area of a page, in rows/grid.

So, I have:

Created a grid inside a container, then added a container to the grid and added button blocks inside that container. I’ve added 30px of horizontal gap to the grid as a whole in order to make a space between the columns of buttons that contain the jump links.

It all works okay on desktop, but once you start getting smaller screen sizes in the customizer (and also in browser, so it isn’t a quirk of the customizer) the buttons ignore the horizontal gap of the grid they are contained in and squidge (ahem… technical term…) up close together losing the gap.

I had set the buttons to ‘fill available width’ as I want them all to be the same width, but I thought the horizontal gap would mean that the gap was retained.

I have made sure the horizontal gap exists on the grid for desktop, tablet and mobile settings…

What am I doing wrong?

Thanks to anyone who can help :slight_smile: