Collections list creates a pseudo element (::before & ::after) - how to display: none

Hi, I have a collections list as a nav bar on a CMS categories page to act as a filter for the CMS items. It is great on all but mobile as flex wrap has kicked in by then. Seemingly it creates pseudo elements both ::before and ::after which impact the alignment of the first and last flex items in the list. In Chrome dev tools, I can simply change the pseudo elements to display: none and then the list item alignment is perfect. But I really cannot work out how to do this on webflow. Any help would be hugely appreciated.

Screenshots and link below:

As you can see the first and last flex items aren’t aligned with the rest of the items. I could maybe use flex self-align but I think that dealing with the pseudo elements would be better.

Here is my site Read-Only:

Live site:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.