0d33dff597
* feat: initial infra * feat: break down steps * feat: tests 1-30 * feat: tests 31 to end * chore: apply gikf's review suggestions Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * feat: actually testing things helps * chore: apply review suggestions Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: take the part, put it in a step * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: missed one Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: clarify verbiage Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
1.4 KiB
1.4 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 615f3b091162165948e1cb33 | Step 11 | 0 | step-11 |
--description--
If you inspect your .label element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size.
To solve this, reset the box model by creating a * selector and giving it a box-sizing property of border-box.
--hints--
You should create a * selector.
assert(new __helpers.CSSHelp(document).getStyle('*'));
Your * selector should have a box-sizing property set to border-box.
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
--seed--
--seed-contents--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nutrition Label</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="label">
<h1>Nutrition Facts</h1>
<p>8 servings per container</p>
<p>Serving size 2/3 cup (55g)</p>
</div>
</body>
</html>
--fcc-editable-region--
--fcc-editable-region--
html {
font-size: 16px;
}
body {
font-family: 'Open Sans', sans-serif;
}
.label {
border: 2px solid black;
width: 270px;
margin: 20px auto;
padding: 0 7px;
}