Help with CSS Problem

HTML-CSS
1 
  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:

2

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.

3

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.

5

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

6

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>
3 Likes
7

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.

9

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
10

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

11

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