fix(UI): make the progression arrows be centered

[mmatsumoto1026]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

Closes #XXXXX

Edit: related PR is #54576.

This PR was opened to make the progression arrows be vertically horizontally centered on any viewport width including small mobile devices.

before	after

By using gitpod, the code was tested with following environment.

1. Windows 11 Home PC using Chrome, Firefox, Edge, and Brave browser, or, webkit within the Playwright.
2. Android Studio's emulator(Pixel 6 Pro with Android API 34 system image) using Chrome.
3. iPhone SE (iOS 15.7.8) using Chrome and Firefox browser.

[mmatsumoto1026]

I'm not sure it is what the designer intended, but I tried to make the progression arrows be vertically aligend so they will be fully responsible as shown in below.

make the progression arrows fully responsive

make_progression_arrows_vertically_centered.mp4

[Sembauke]

It seems that the arrow heads are invisible too. That is an issue.

[ahmaxed]

The arrow heads were removed intentionally.

[moT01]

LGTM 🎉

[ahmaxed]

Thanks for centering it.
It seems like we need another method to show the line.
perhaps a div with a border that goes behind the ribbons.

[mmatsumoto1026]

perhaps a div with a border that goes behind the ribbons.

Actually, I agree with you because with the method, we will be able to avoid using svg image for showing the line, and also, we may be able to expand or shrink the length of the lines as need.

[ahmaxed]

Github has a good example.