bug: [Mobile UI Bug] Navigation buttons misaligned on mobile browsers

[BARNALIXD]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Do something
2. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots or GIFs
If applicable, add screenshots to help explain your problem.

Info (please complete the following information):

• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[BARNALIXD]

Describe the Bug

The forward and previous navigation buttons are not aligned properly when viewing the application on a mobile web browser (e.g., Chrome/Safari on Android/iOS). The layout is fine on desktop.

Steps to Reproduce

1. Open the 100xdevs course application on a mobile phone browser.
2. Navigate to any video page (e.g., a video under "Week 17").
3. Observe the placement of the forward (→) and previous (←) buttons.
4. Expected Result: Buttons should be symmetrically aligned, likely at the bottom of the video player or screen.
5. Actual Result: The buttons are misaligned, overlapping, or placed incorrectly.

Device & Browser Information (please complete the following information)

• Device: e.g., Samsung Galaxy S23 / iPhone 14
• OS: e.g., Android 14 / iOS 17
• Browser: e.g., Chrome 125 / Safari 16.5
• Screen Size: (You can find this in your phone's settings, but often just the device name is enough)

Screenshot/Video

(Attach a screenshot or screen recording that clearly shows the misalignment. This is very helpful!)

You can see the misalignment in the attached screenshot from the video player.

Additional Context

Add any other context about the problem here. For example, does it happen on every video page? Does rotating the phone fix it?