Mobile Header Alignment Fix

On the mobile version of my homepage the menu bar is centred; I need it anchored to the left corner instead, without disturbing its current styling, behaviour, or anything on desktop or inner pages. The site is pure CSS—no Bootstrap, Tailwind, or other framework—so you will be working with vanilla HTML/CSS (and a touch of JS only if absolutely unavoidable).

Scope
• Target only mobile breakpoints (≤ 768 px).
• Restrict the change to the homepage; every other view must remain exactly as is.
• Keep download size and render performance unchanged.
• The finished code must work flawlessly on Chrome, Safari and Firefox.

Deliverables
1. Updated CSS (or scoped inline styles) and, if needed, a lightweight JS snippet.
2. A short change log naming each file you touched and the line numbers or selectors added/edited.
3. Quick test guide outlining how to verify the fix across common mobile resolutions (e.g., 375 × 667, 414 × 896).

Acceptance criteria
• On mobile, the menu bar sits flush left.
• No layout shift appears on desktop or non-homepage routes.
• All hover/tap interactions still function.
• Verified pass in the latest Chrome, Safari and Firefox.

Please send a brief but detailed project proposal describing your planned approach, the selectors or techniques you expect to use, and any questions you need answered before you begin. Clean, maintainable code is a must.