Can't get even spacing around text blocks in vertical nav bar when text is rotated 90 degrees

Hey everyone

I have a vertical navigation menu and am trying to evenly space the page links when the text has been rotated 90 degrees.

At the moment they are being evenly spaced using a flex box + Justify: space around but this spaces them evenly as if they were in their standard horizontal position. The issue with this is that longer page names then overlap the names next to them when rotated (most noticeable between the ‘Journeys’ and ‘Environmental’ tabs.

I think one solution would be to change all the elements centre of rotation but I am not sure if you can do this? I have tried playing with the ‘Transform Origin’ couldn’t get it to work well and then be compatible with various different browser sizes - so am still at a bit of a loss!

Any help would be greatly appreciated! (The nav menu isn’t on the home page, but can be found on all others)


Here is my site Read-Only: LINK
(how to share your site Read-Only link)