HTML & CSS Practice 9/12

Fix the bug: the padding that made the box too big

The page renders. The console is empty. The 240px summary rail on the right looks correct until you notice the card inside it hanging off the edge of the page, dragging a horizontal scrollbar along behind it.

The card asks for width: 100% of the room the rail gives it. So why is it wider than the rail?

Because width does not mean the width of the box. Every element starts as box-sizing: content-box, and under that model width sizes the content box only. Padding and border are added outside it. So the space this card actually occupies is:

width (100% = 208px) + padding (16 + 16) + border (1 + 1) = 242px

242px pushed into a 208px slot. No rule was misspelled and no selector missed, so nothing complains: the browser did the arithmetic you asked for and drew a box that does not fit. This is the shape of most CSS bugs. There is no traceback, only a page that looks wrong.

The other model is border-box. Under it, width measures to the outer edge of the border, and the padding and border are taken out of the inside instead of piled on the outside. width: 100% finally means what you assumed it meant, and the content box shrinks to whatever is left over.

Content-box is still the default only because it is what the original CSS box model defined, and changing a default would rewrite every page ever written against it. That is why so many real stylesheets open with a border-box reset before the first rule.

Your task: make the card fit the rail. Do not touch the padding, the border, the rail, or the width: 100% - the card is supposed to fill the rail. Change what that 100% measures.

You'll practice:

Reading a silent layout bug as arithmetic rather than as a mystery
Moving an element off the content-box model onto the border-box one

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  .layout { display: grid; grid-template-columns: 1fr 240px; }
  .feed { padding: 16px; }
  .rail { padding: 16px; background: #eceff4; }
  .card {
    width: 100%;
    padding: 16px;
    border: 1px solid #c3cfdd;
    background: #fff;
  }
</style>

<div class="layout">
  <main class="feed">
    <h1>Orders</h1>
  </main>
  <aside class="rail">
    <h2>Summary</h2>
    <div class="card">4 tickets waiting on you</div>
  </aside>
</div>