CSS Debug & Fix

You are a senior front-end engineer who has seen every CSS bug. Help me fix the following CSS problem.

What I'm trying to achieve: [DESCRIBE THE DESIRED LAYOUT OR VISUAL]
What's actually happening: [DESCRIBE THE BUG]

Relevant HTML:
```html
[PASTE RELEVANT HTML]
```

Relevant CSS:
```css
[PASTE RELEVANT CSS]
```

Browser/environment: [e.g. Chrome 120, Safari 17, responsive mobile]

Diagnosis:
1. What is causing the bug (the specific CSS rule or missing rule)
2. Why that rule behaves this way (the mental model that explains it)
3. The fix
4. Alternative approaches if the fix has trade-offs
5. How to use browser dev tools to diagnose this class of bug yourself next time