Learn Basic CSS by Building a Cafe Menu - Step 21

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

i’m having an issue establishing a #menu selector with a div then width. any input would be great

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;
}
#menu-id div {
  width: 300px; 
}
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/118.0.0.0 Safari/537.36

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

Link to the challenge:

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.

1 Like

Hi there,
Please check your selector. Is your div nested in a #menu-id? And does your ID name in the HTML match the one in the CSS? The syntax for selecting an id is as follows: #id-name. Furthermore, the selector to the left is the outer selector and the right is the inner selector. So #menu-id div means:

<div id="menu-id">
  <div>
  </div>
</div>

Here’s an article about how HTML and CSS works.

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