CSS Fundamentals: The Box Model, Specificity, Positioning, and Layout

Common Mistakes Worth Remembering

• Forgetting the border-box reset, then being confused when padding makes an element overflow its container.
• Using !important to fix a specificity problem instead of fixing the actual selector — it usually just moves the problem to the next override.
• Setting z-index on a position: static element and wondering why it does nothing.
• Assuming stacked vertical margins add together instead of collapsing to the larger one.
• Nesting em-based font sizes several levels deep and getting unexpectedly large or small text from compounding.
• Reaching for Grid when a layout is really one-dimensional, or fighting Flexbox to fake a two-dimensional layout — both make the CSS harder to read than the right tool would.
• Writing an overly broad descendant selector (.card p) when a child combinator (.card > p) was actually what was meant, causing styles to leak into nested components.
• Using a media query to respond to a component's own available space instead of a container query, so a reusable component looks fine in one layout and broken in another.

Layout and styling decisions like these constantly interact with how components render — see React Fundamentals for how JSX, conditional rendering, and component composition build on top of this same foundation. Practice these ideas hands-on — with real MCQs and live coding exercises — in the code lab.