Real CSS work is half writing and half finding out why something does not work. Each exercise below is broken on purpose. Find the bug, fix it and press Run to check.
Use the routine from Developer Tools: select the element, look for crossed-out rules and check that the property and value are valid.
1. The color that never changes
<style>
.title {
color: green
font-size: 28px;
}
</style>
<h1 class="title">Why is this heading not green?</h1>Show the fix
A semicolon is missing after green. The browser reads the two lines as one broken declaration and ignores both. Write color: green;.
2. The rule that matches nothing
<style>
.card-title { color: #d94a00; }
#highlight { background: yellow; }
</style>
<h2 class="card_title" id="Highlight">Why is nothing applied?</h2>Show the fix
The names do not match: the HTML has card_title (underscore) but the CSS asks for card-title (hyphen), and Highlight has a capital H while the CSS uses highlight. Class and ID names are case sensitive and character exact.
3. The style that loses
<style>
#menu a { color: white; }
.cta { color: orange; }
nav { background: #1a5276; padding: 10px; }
</style>
<nav id="menu"><a href="#">Home</a> <a class="cta" href="#">Sale</a></nav>Show the fix
The ID selector #menu a is more specific than .cta, so the link stays white. Without !important: change the first rule to .menu a (or nav a) and the second to .menu .cta, or give the nav links a class. See Specificity.
4. The horizontal scrollbar
<style>
body { margin: 0; }
.box { width: 100%; padding: 20px; border: 4px solid #d94a00; background: #fdebd9; }
</style>
<div class="box">This box is wider than the panel. Why?</div>Show the fix
Width is 100% plus padding and border, because the default is content-box. Add box-sizing: border-box;. See Box Sizing.
5. The missing gap
<style>
.a { margin-bottom: 30px; background: #d0e8f2; }
.b { margin-top: 30px; background: #fdebd9; }
</style>
<div class="a">Block A</div>
<div class="b">Block B. I want 60px between A and B but get 30px.</div>Show the fix
The vertical margins collapse into one, so the gap is the larger of the two (30px). Use one margin only, or gap in a flex or grid container, or give the blocks a total of 60px in a single margin. See Margin Collapse.
6. The button behind the overlay
<style>
.stage { position: relative; height: 90px; }
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.btn { padding: 10px 16px; background: #d94a00; color: #fff; border: 0; }
</style>
<div class="stage"><button class="btn">Click me</button><div class="overlay"></div></div>Show the fix
The overlay is positioned and comes later in the HTML, so it sits on top and swallows clicks. Give the button position: relative; z-index: 1;, or lower the overlay with pointer-events: none if it is only decoration. See z-index.