Header elements overlap at widths above 1024px

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.

https://github.com/user-attachments/assets/df27db0e-844f-4a38-9c55-dfc520d779e1