---
id: 615f3b091162165948e1cb33
title: الخطوة 11
challengeType: 0
dashedName: step-11
---

# --description--

إذا قمت بفحص عنصر `.label` الخاص بك باستخدام أدوات مطوري المتصفح (developer tools) الخاص بك، قد تلاحظ أنه في الواقع عرضه 288 بكسل بدلا من 270. والسبب في ذلك هو أن المتصفح يتضمن بشكل افتراضي الحدود (border) والـ padding عند تحديد حجم العنصر.

لحل هذه المشكلة، قم بإعادة تعيين الـ box model عن طريق إنشاء منتقي `*` وإعطائه خاصية `box-sizing` بقيمة `border-box`.

# --hints--

يجب عليك إنشاء منتقي `*`.

```js
assert(new __helpers.CSSHelp(document).getStyle('*'));
```

يجب أن يكون لمنتقي `*` الخاص بك `box-sizing` بقيمة `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;
}
```
