Header elements overlap at widths above 1024px

[himesh026]

When the viewport width goes slightly beyond 1024px, the header layout breaks and elements start overlapping.

Specifically:

• The GitHub/repo icon on the top-right overlaps with the navigation items/buttons.
• The issue happens around the responsive breakpoint transition near 1024px.
• Header spacing/alignment does not adjust correctly between tablet and desktop layouts.

Steps to Reproduce:

1. Open the website.
2. Open DevTools responsive mode.
3. Set viewport width around 1025px.
4. Observe the top-right header section.

Expected Behaviour:
Header items should remain properly aligned with consistent spacing and no overlap across responsive breakpoints.

Actual Behaviour:
The GitHub icon and nearby buttons overlap with navigation links.

Possible Cause:
The responsive breakpoint/layout styles between tablet and desktop may not properly handle spacing or flex wrapping near the 1024px threshold.

Screenshot / Recording:
Attached screen recording showing the issue near 1025px width.

Screen.Recording.2026-05-25.at.1.38.43.PM.mov