Fix the header items alignment

[Shivam-Katare]

Description

Fixed the header items alignment and made it responsive to make it flexible for all screen sizes

Fixes #1473

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

How Has This Been Tested?

I tested it on Chrome and Edge browser

Checklist:

• I have performed a self-review of my own code
• My changes generate no new warnings

Screenshots or example output

[netlify]

✅ Deploy Preview for reactplayio ready!

Name	Link
🔨 Latest commit	b81de51
🔍 Latest deploy log	https://app.netlify.com/sites/reactplayio/deploys/65dea859c2af050009c9926e
😎 Deploy Preview	https://deploy-preview-1475--reactplayio.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.

[github-actions]

Hey! contributor, thank you for opening a Pull Request 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

[Shivam-Katare]

Hey @priyankarpal, I raised the PR, you can review it now. Let me know if any changes are required in it.

[priyankarpal]

Looks Good 🎉