---
id: 5f47633757ae3469f2d33d2e
title: Hatua ya 45
challengeType: 0
dashedName: step-45
---

# --description--

Ukifanya upana wa onyesho la kukagua ukurasa kuwa mdogo, utaona wakati fulani, baadhi ya maandishi yaliyo upande wa kushoto yanaanza kuzunguka hadi mstari unaofuata. Hii ni kwa sababu upana wa vipengele vya `p` vilivyo upande wa kushoto vinaweza tu kuchukua `50%` ya nafasi.

Kwa kuwa unajua bei zilizo upande wa kulia zina herufi chache zaidi, badilisha thamani ya class ya `flavor` kuwa na `width` ya `75%` na thamani ya class ya `price` kuwa na `width` ya `25%`.

# --hints--

Unapaswa kuweka sifa ya `width` kuwa `75%` katika kiteuzi chako cha `.flavor`.

```js
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
assert(flavorWidth === '75%');
```

Unapaswa kuweka sifa ya `width` kuwa `25%` katika kiteuzi chako cha `.price`.

```js
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
assert(priceWidth === '25%');
```

# --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">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">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;
}

--fcc-editable-region--
.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}
--fcc-editable-region--
```

