71 lines
1.4 KiB
Markdown
71 lines
1.4 KiB
Markdown
|
---
|
||
|
|
id: 615f3b091162165948e1cb33
|
||
|
|
title: Step 11
|
||
|
|
challengeType: 0
|
||
|
|
dashedName: 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.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(new __helpers.CSSHelp(document).getStyle('*'));
|
||
|
|
```
|
||
|
|
|
||
|
|
Your `*` selector should have a `box-sizing` property set to `border-box`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
|
||
|
|
```
|
||
|
|
|
||
|
|
# --seed--
|
||
|
|
|
||
|
|
## --seed-contents--
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!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>
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
--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;
|
||
|
|
}
|
||
|
|
```
|