Learn Basic CSS by Building a Cafe Menu - Step 21

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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 */

/* User Editable Region */

body {
  background-color: burlywood;
}

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

#menu-id {
  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/117.0.0.0 Safari/537.36

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

Link to the challenge:

2

You are using the #menu-id selector. The instructions are asking you to use the #menu selector. That’s what the hint is telling you as well.

3

Exactly how i worded it exactly the same way but its not working

4

Hello!

I believe if you read @bbsmooth’s second sentence in the above response, you will find the small error that is causing you problems. He has highlighted what shouldn’t and what should be for the selector to help you.

In the instructions, it is saying to use the id selector so we will know to use the correct syntax for the selector. You have the syntax correct. But have included part of the instruction.

I hope helps you progress further along.

5

Any time you make changes to your code and it still doesn’t work and you want additional help then you need to paste your updated code in here so we can see what you did using the following method.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

6

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