Keep actual paragraph width when text wraps


I’m using links inside div blocks, which are justified centered under my h1 heading, as navigation on every page on my site. I have the following issue:

On smaller breakpoints, the divs ‘squeeze’ the navigation elements together, so that the text wraps. That is not an issue, however, as soon as the text inside a div block wraps, the text block doesn’t take up the actual width the text instead takes up, but instead however much the other elements and padding of the container allow it. This leaves the affected navigation element awkwardly off-center and not aligned with the other navigation elements.

You can observe this with my read-only link on the mobile breakpoint just after switching between screen width of 393px and 390px (e.g. iPhone 13), affecting the link for ‘About Me’.

Is there any way to change the behaviour of the text block, so it only takes up as much width as the text inside does?

Kind regards

Here is my site Read-Only: LINK