fix: header overlap with other content in smaller screens

[HASH-0021]

Issue:

• Header is overlapping with the below content for smaller screens.

Changes:

• Header is changed from position:fixed to position:sticky. This allows header to have position as fixed when scrolling and relative when it isn't.
• Added right margin to logo as the logo and navigation buttons are too close for certain screen widths.
• Refactored the code of dark mode toggle button to use the existing code design language.
• Adjusted spacing for header and main elements.

[zero-to-mastery-bot]

🙏 Thanks for your pull request @HASH-0021, The team will now review and merge this request. In the mean time why not check out some of the other opensource projects available, contributions are greatly appreciated!

Some of the most popular are

• Student Resources
• ZTM Job Board
• Complete Web Developer Manual

---

PR Statistics

#️⃣ PR Number:	➕ Line Additions:	🗑️ Line Deletions:
3320	13	9

📑 Files Changed:	⭐ Repo Stars:	🔱 Total Forks:
3	1112	2908