# Debugging Layouts

Debugging Layouts: Debugging Layouts with Developer Tools, Common Layout Bugs and How to Fix Them.

Updated: November 10, 2026

1. [Debugging Layouts with Developer Tools](https://www.ask-codey.com/lessons/css-debugging-with-devtools) (Journeyman): A seven-step routine for "why does it look like that?", using the Computed pane, the box model diagram, the flex and grid overlays, switching rules off, forcing :hover and :focus, and the outline trick.
2. [Common Layout Bugs and How to Fix Them](https://www.ask-codey.com/lessons/css-common-layout-bugs) (Journeyman): The seven layout bugs almost everyone meets, from a page that scrolls sideways to a z-index that won't work, each with its symptom, its cause and the fix that removes the cause instead of hiding it.

Source: https://www.ask-codey.com/courses/css-in-depth/topics/css-debugging-layouts