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

[TNP (I’m)]

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:

https://preview.webflow.com/preview/the-nutrition-plan?utm_medium=preview_link&utm_source=designer&utm_content=the-nutrition-plan&preview=11aa843c3b798ae441fc3d5ebe7dc627&pageId=5ed5694be5322aa1026593aa&itemId=5ed56c51ee14fb36ee22cca1&mode=preview

Live site:

https://www.thenutritionplan.co.uk/recipe-collections/breakfast