Learn Basic CSS by Building a Cafe Menu - Step 33

Tell us what’s happening:
Describe your issue in detail here.
How to put the flavor element with text - align

Your code so far

<!-- file: index.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>
            <p class="flavor">French Vanilla</p>
            <p>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>
/* file: styles.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;
}

/* User Editable Region */

  flavor {text-align: left;}

/* User Editable Region */


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 33

Link to the challenge:

hello, I can see you are doing well already. however, I will like you to look at the example below where you used the .menu class selector and compare it with the flavor selector you just inputted.

by the time you are done, you will understand better and be able to fix the error in your code.

3 Likes

“flavor” is not element. it’s a class you made.
Now the exercise asks you to assign properties for that class. In this case, “text-align” property.
A property also has a value. they also mentioned which value should be given to it.

For example, In the exercise,
you can see there’s a class called “menu” and lots of properties like “width”, “background-color”, “margin-left” etc. and each of them has a value given next to it.
the property “width” has a value “80%”.

Now they ask you to do similarly for the class “flavor”,
give the property “text-align”,
and the property’s value is “left”

Hope that helps.

2 Likes

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