curriculum/challenges/english/blocks/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md
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.
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');
<!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;
}