Learn Basic CSS by Building a Cafe Menu - Step 33

HTML-CSS
1

I**Tell
Describe your issue in detail here. Can’t figure where my syntax is lacking. Is it me or is this right?
.flavor {
text-align: left;
}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;
 .flavor {
  text-align: left;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

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

Link to the challenge:

2

The syntax is correct but it looks like you put it in the .menu class selector.
image

You need to end the .menu selector with its closing brace and then put this code outside it as a separate class selector.

1 Like
3

Wow!!! I’ve been here for hours trying to figure this out! Thankyou so much! You are a mental health :ring_buoy: lifesaver

4

lol thanx.:grin: Pls mark this as a solution then.

1 Like
5

This only my second question since starting the course. I didn’t know the solution button existed

6

yep and it gives helpful people brownie points to reward them for having your back :wink: keep up the good work!

2 Likes
7

Now that I know I will absolutely mark all solutions. Hopefully I won’t need many🫠

1 Like
8

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