fix: constrain header containers at wide viewports (#47)

[jacaudi]

Summary

Closes #47. At viewports wider than 1080px, #logo_container and #chiz_container were both position: fixed; width: 25%, anchoring the logo to the far-left edge and the icons/menu to the far-right edge. At 1150px this created ~575px of dead space; wider screens made it worse.

Change

CSS-only, no HTML template change.

Base rule (src/css/styles.css):

• #logo_container, #chiz_container: width: 25% → width: auto; left: 25%; right: 25%
  Both containers now span the central 50% of the viewport, matching #main_container's padding: 25% 0.
• #logo_container: align-items: flex-start so the logo anchors to the left edge of that central strip.
• #chiz_container: removed right: 0 (set on base now); justify-content: flex-end already anchored icons to the right edge.

Narrow viewport override (@media (max-width: 1080px)):

• #logo_container: left: 0; right: auto — reverts to full-width / left-anchored.
• #chiz_container: left: auto; right: 0 — reverts to right-anchored.

Without these explicit overrides, the new base left: 25%; right: 25% would cascade into mobile/tablet and break them.

Why this preserves mobile and tablet

At ≤1080px the narrow-viewport media query resets left/right to the originals, so #logo_container goes back to width: 100vw; left: 0 and #chiz_container goes back to right: 0 with its content-sized width. The ≤800px portrait rules only touch top, unaffected.

Dark mode is unaffected — only positioning properties changed; no color or background rules touched.

Test plan

• Full Node.js suite: 133 pass / 0 fail
• Math verified at 375px, 768px, 1000px (narrow media query unchanged), 1150px, 1440px, 1920px (anchors to main-content edges)
• Visual verification at 1440px (skipped by agent; recommend local check)
• CI green