Fix: Nav Bar Alignment, Spacing, and Overflow on Small Devices

[Mohd-FaiZ-Jr]

Related Issue

Fixes: #861

Description

The nav items is now properly aligned across all screen sizes.
The spacing between nav items is now consistent, maintaining a clean and organized look on smaller devices.
The nav bar adjust itself responsively to prevent any overflow, ensuring all nav items are visible without the need for horizontal scrolling.

Type of PR

• Bug fix
• Feature enhancement

Screenshots / videos (if applicable)

BEFORE:

AFTER:

Checklist:

• I have made this change from my own.
• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have tested the changes thoroughly before submitting this pull request.
• I have provided relevant issue numbers and screenshots after making the changes.

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 8 minutes (more than 100, code: "api-deployments-free-per-day").

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our contributing.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify]

✅ Deploy Preview for buddytrail ready!

Name	Link
🔨 Latest commit	f773438
🔍 Latest deploy log	https://app.netlify.com/sites/buddytrail/deploys/67128dd35cdbf40008f07ede
😎 Deploy Preview	https://deploy-preview-998--buddytrail.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.