Learn Basic CSS by Building a Cafe Menu - Step 32

Tell us what’s happening:
I am stuck here. I was asked this.
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.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <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"/>
    <div class="menu">
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
            <p>French Vanilla</p>
            <p>Caramel Macchiato</p>
            <p>Pumpkin Spice</p>
/* 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/ Safari/537.36

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

Link to the challenge:

They want you to add a class of flavor to the paragraph element with the text French vanilla.

Thanks for replying. I know that. I thought adding a class name jst required me to type in something like “.flavor” there…bt it doesn’t work.

You have to use the name of the attribute.

So, attribute=“value”

Still confused. I don’t know what attribute and what value I should input there.

class is an attribute name
flavor is the value

To remind yourself of attributes, you can look at this post if you like

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