All repair missions / Mission 01
Fix this page
Keep the card inside
Repair a card that is wider than its container.
Your goal
Make the complete card fit inside the 260px container. Keep its text, 20px padding and 2px borders visible. Do not clip or scale it.
Edit a short HTML fragment or CSS rules. Changes apply when you press Update preview or Check my repair. Scripts, links, images and external resources are excluded from this small practice area. Edits stay in this page’s memory; reloading starts again.
Your working preview
Check your repair when you are ready.
Read one possible solution
<div class="container">
<article class="card">
<h2>A little curiosity</h2>
<p>Room for an idea. Space to explore.</p>
</article>
</div>.container { width: 260px; border: 2px dashed #80eee0; }
.card {
box-sizing: border-box;
width: 100%;
padding: 20px;
border: 2px solid #ff7700;
background: #423025;
}border-box includes padding and borders in the declared width. The card now occupies 260px rather than 304px. Reducing the content width appropriately can also work.
Starting code and all hints
<div class="container">
<article class="card">
<h2>A little curiosity</h2>
<p>Room for an idea. Space to explore.</p>
</article>
</div>.container { width: 260px; border: 2px dashed #80eee0; }
.card {
box-sizing: content-box;
width: 100%;
padding: 20px;
border: 2px solid #ff7700;
background: #423025;
}- Compare the declared width with the width including padding and borders.
- With content-box, 100% covers only the content. Padding and borders are added outside it.
- Try box-sizing: border-box on .card.