Avoid using text-align on body element

[gravitystorm]

As part of #3427 and following up from the last part of #3428 we have a problem where all text, even with dir=auto, is forced into a pre-determined alignment. This is because we set the global text-alignment explicitly in our CSS:

openstreetmap-website/app/assets/stylesheets/common.scss

Lines 29 to 31 in 3a534ea

	[dir=rtl] { /* no-r2 */ text-align: right; }
	[dir=ltr] { /* no-r2 */ text-align: left; }

This property then cascades down to every element. Setting dir="auto" on a child element is not enough to override this global text-align. But if we omit the text alignment altogether, everything works fine by default. Having dir=rtl on the body makes everything right-aligned by default, and where we specify dir="auto", then the alignment will automatically flip based on content (since there is no overriding text-align set).

Unfortunately bootstrap 4 has text-align: left hardcoded and expects RTL-only sites to override this. But in bootstrap 5, which has additional focus on RTL, that was removed, and the default text-align is now null allowing dir="auto" to work as intended.

So fixing this is split into three parts:

• Upgrade to bootstrap 5 (Update Bootstrap 4 to 5 #3230).
• Remove the global text-align from our own CSS.
• Check the other text-align declarations in our CSS, and see which can be removed.