# Learn-basic-css-by-building-a-cafe-menu/step-40

**URL:** <https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-40/626523>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [July 31, 2023, 1:24pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-40/626523 "2023-07-31T13:24:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rohitranjan7991](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rohitranjan7991/32/327421_2.png) [@rohitranjan7991](https://forum.freecodecamp.org/u/rohitranjan7991)\
**Post date:** [July 31, 2023, 1:24pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-40/626523/1 "2023-07-31T13:24:04Z")

</div>

not able find out the exact width value?  
here is my code

```auto
<!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>
            <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>

```

```auto
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: 50%;
}

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

```

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-40)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![JeremyLT](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremylt/32/291894_2.png) [@JeremyLT](https://forum.freecodecamp.org/u/JeremyLT)\
**Post date:** [July 31, 2023, 1:35pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-40/626523/2 "2023-07-31T13:35:29Z")

</div>

Please post the link to the Step.

If you use the Ask for Help button, then the link and your code will be included in the post automatically.

---

<div class="post-metadata">

**Author:** ![JeremyLT](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremylt/32/291894_2.png) [@JeremyLT](https://forum.freecodecamp.org/u/JeremyLT)\
**Post date:** [July 31, 2023, 1:35pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-40/626523/3 "2023-07-31T13:35:38Z")

</div>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (`</>`) to add backticks around text.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (').

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [January 30, 2024, 1:36am UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-40/626523/4 "2024-01-30T01:36:36Z")

</div>

Closed on January 30, 2024, 1:36am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.