CSS problems.
Solved in 3 minutes each.
Every page here answers one specific question — the exact thing you typed into Google. No filler. Just the answer, working code, the reason it works, and the mistakes to avoid. This is what you need when the layout collapses, the specificity war won't end, or the div just won't center.
How to use this page. Find your problem in the list below. Click it. The answer is the first thing on the page — no scrolling required. Every page has a "Short answer" box at the top, followed by the working code, then the explanation. If you're looking for a structured learning path instead, the CSS learning path covers every concept from scratch.
📐 Layout
Centering, flexbox, grid, and the box model.
How do I center a div?
Flexbox, grid, and the absolute-positioning trick — when to use each.
How does the CSS box model work?
Content, padding, border, margin — and why box-sizing: border-box matters.
Flexbox vs grid — which one?
One-dimensional vs two-dimensional. The rule for choosing.
Why doesn't position: sticky work?
The overflow ancestor, the missing top, and the three causes.
grid-template-areas explained
Named grid areas — readable layouts without counting columns.
🎯 Specificity
Why your CSS doesn't apply — and how to fix it.
👁️ Display & visibility
Hiding elements, floating, and layout flow.
📱 Responsive
Media queries, units, and fluid design.
How do media queries work?
Breakpoints, min-width vs max-width, and mobile-first.
rem vs em
Root-relative vs parent-relative — the difference compounds.
Fluid text with clamp()
Font size that scales with viewport — no media queries needed.
How does aspect-ratio work?
Fixed ratio boxes without padding hacks or JS.
overflow: hidden vs scroll
Clipping, scrolling, and the scrollbar layout shift.
⚡ Modern CSS
Variables, focus states, and scroll behavior.
How do CSS variables work?
Custom properties, cascade, and the fallback value pattern.
What is :focus-visible?
Keyboard-only focus styles — no outlines on mouse clicks.
Why doesn't :hover work on touch?
Touch has no hover state — the media query that fixes it.
How does scroll-snap work?
CSS-only carousels and paginated scrolling.
📋 All 20 problems
Sorted by category. Click any to jump straight to the answer.