Learn Basic CSS by Building a Cafe Menu - Step 21

Tell us what’s happening:
The instructions say - # Step 21

The goal now is to make the div not take up the entire width of the page. The CSS width property is perfect for this.

You can use the id selector to target a specific div element. An id selector is defined by a name with a hash symbol directly in front of it, like this:

#example-id {
  width: 250px;
}

Use the #menu selector to give your element a width of 300px.

I have tried keying in the #menu selector in a number of ways with no success.
Please help me figure out what I am missing!

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;
}
div {
  #menu {
    width:300}
    }
h1, h2, p {
  text-align: center;
}

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

Link to the challenge:

1 Like

You should remove this div selector from your css page.
Only write like this .
#menu{
width:300px;
}

2 Likes

OMG thank you! I was going a little insane!

2 Likes

I am having the same problem. But i did exactly what you said and it’s still saying ‘you should have a #menu selector’.

This is my code so far:
body {
background-color: burlywood;
}

h1, h2, p {
text-align: center;
#menu {
width: 300px;
}

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