Learn Basic CSS by Building a Cafe Menu - Step 23

Tell us what’s happening:
Describe your issue in detail here.
I have replaced the #menu element as shown and added it via #menu, div but even after resetting a few times it does not work
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 id="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>
/* file: styles.css */
body {
  /*
  background-color: burlywood;
  */
}

h1, h2, p {
  text-align: center;
}


/* User Editable Region */

div {
 background-color: burlywood;
  width: 300px;
}

/* 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/116.0.0.0 Safari/537.36

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

Link to the challenge:

The code you added inside the rule is fine I think. The issue is that you changed the selector for the rule to “div”… (the selector should remain unchanged).

Since the Div you’re targeting has the id of “menu” then the selector will work. You don’t need to change it to “div”…make sense?

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