fix(tab-nav, tab-title): centered layout allows to scroll to the extent

[Elijbet]

Related Issue: #3682

Summary

The centering currently is achieved by applying justify-content: center to the flex container. However, there is a problem with this method when the flex item is bigger than the flex container. For horizontal overflow, the left section becomes inaccessible (or the right section, in RTL languages).

https://codepen.io/elijbet/pen/dyeNJZj

Solution: With auto margins, an overflowing flex item can be horizontally centered without losing access to any part of it.

The result, however, looks a bit different. So I’d like to feedback on whether I can keep the solution.

Current Centering:

Suggested Centering: