Mission 12: Live System Diagnostics

The diagnostic scanner has identified the problem on the life support panel. A faulty negative margin is pulling the text out of alignment. You must apply a patch to the stylesheet to correct the error.

00:00

Step 1 / 1

System Briefing: The Diagnostic Scanner

The life support panel on the S.S. Curie is displaying a critical visual bug—the oxygen percentage text is overlapping its container, making it unreadable. We must use our diagnostic tools to inspect the live code and apply an immediate fix.

The Element Inspector

The browser's developer tools (F12) are your most powerful diagnostic scanner. The 'Elements' panel shows you the live HTML structure, and the 'Styles' panel shows you every single CSS rule being applied to a selected element, in order of specificity. You can edit these styles live to test changes before writing any code.

Editor