---
id: 5f3cade9fa77275d9f4efe62
title: الخطوة 40
challengeType: 0
dashedName: step-40
---

# --description--

قد نجح ذلك، ولكن لا يزال هناك مسافة فارغة صغير على يمين price.

يمكنك الاستمرار في تجربة نسب مئوية مختلفة للعرض. وبدلا من ذلك، استخدم مفتاح space على لوحة المفاتيح لنقل عنصر `p` مع الفئة `price` بجانب عنصر `p` مع الفئة `flavor` بحيث تكون على نفس السطر في المحرر. تيقن من عدم وجود مسافة.

# --hints--

يجب ألا يكون للعناصر `p` الخاصة بك أي مساحة بينها.

```js
assert(code.match(/Vanilla<\/p><p/));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
--fcc-editable-region--
            <p class="flavor">French Vanilla</p>
            <p class="price">3.00</p>
--fcc-editable-region--
          </article>
          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article>
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p>Mocha</p>
            <p>4.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>
```

```css
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

.item p {
  display: inline-block;
}

.flavor {
  text-align: left;
  width: 49%;
}

.price {
  text-align: right;
  width: 49%;
}
```

