Common Mistakes

When you're just starting out with CSS, there's no error message to point you at what went wrong, so it can be tricky to figure out. The most common issues are selectors that don't match, forgotten semicolons, not understanding specificity, mobile overflow, uncontrolled image widths, and huge code blocks that overflow the screen.

Checklist to run through

• Does the class name match between the HTML and CSS?
• Is the property spelled correctly?
• Did you forget the semicolon ;?
• Is a child overflowing because of the parent's width?
• Do the cards stack properly on mobile?
• Is the text contrast readable?
• Are the buttons easy to tap?

Debugging CSS is a lot like a detective game. You check each clue one by one until you find the culprit.

/* Good global reset for predictable sizing */
* {
  box-sizing: border-box;
}

/* Prevent images from breaking mobile layout */
img {
  max-width: 100%;
  height: auto;
}

/* Long code should scroll inside its own box */
pre {
  overflow-x: auto;
}

You'll be able to prevent a lot of common layout bugs with a basic reset.