Learn Basic CSS by Building a Cafe Menu - Step 21

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

Your code so far
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

<!-- 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{
width: 300px;

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

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

Link to the challenge:

Look at the hint. What selector is it telling you to use?

Hello and welcome to the forum,

in CSS you select a HTML element with an attribute id="" with the ID Selector #. You didnt select the div element with an ID of menu correctly. I see in your CSS that you wrote #menu-id but the id of the div element is different.

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