Help with CSS Problem

  Step 33

The flavors and prices are currently stacked on top of each other and centered with their respective p elements. It would be nice if the flavor was on the left and the price was on the right.

Add the class name flavor to the French Vanilla p element.
I am stumped on the answer for this one apparently <class-name=“flavor”>

French Vanilla

<class-name=“flavor”>

3.00

is not the correct answer. Can anyone assist? THanks! :slight_smile:

/* file: index.html */
<!DOCTYPE html>
<html>
<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" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article>
         <class-name="flavor"><p>French Vanilla</p><class-name="flavor">
          <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;
}
  **Your browser information:**

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

Challenge: Step 33

Link to the challenge:

I can see how the wording could be confusing with the question, but just assign the “flavor” class to the <p> element like you would assign any other class. “Name” has nothing to do with it, they were just telling you that the name of the class was flavor.

Hi there, Im having the same issue…nice to see others up learning. Ive tried w3schools and still ??? here is my code

Im chef Drew.

ok so Im not sure why when I paste my code in here it doesn’t show…Im knew to much of this world, all help much appreciated

Haha yes, midnight-3am are my prime coding times lol! To submit code, click the </> in the bar at the top of the text box where you enter your comment.

But I figured out your issue. When you are assigning a class to something, you have to include that class=“flavor” in the tag. It’s not its own tag.
Right now you are writing it like:

<class="flavor"><p>French Vanilla</p></class="flavor">

But isn’t a tag. To assign a class to a element you have to put it inside the tag, like such:

<p class="flavor">French Vanilla</p>
1 Like

Thanks a bunch for your input, are you able to write it out, I have attempted to do it in different ways but for whatever reason I’m still not getting it, the frustrating part is it is probably something really simple and I am just not placing it in the proper order.

Yep of course! Here is the full code:

<html>
<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" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <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>
1 Like

Nice to meet ya, keep up the good fight :call_me_hand: