Learn Basic CSS by Building a Cafe Menu - Step 20

Tell us what’s happening:

What’s wrong am i doing here? things seems fine to me.

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>

<!-- User Editable Region -->

  <body>
  <div id="menu">
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </div>
  </body>

<!-- User Editable Region -->

</html>
/* file: styles.css */
body {
  background-color: burlywood;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:120.0) Gecko/20100101 Firefox/120.0

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 20

Ya, your HTML just passed for me (and I’m also testing it with Firefox on linux). What hint are you getting?

Sorry, your code does not pass. Keep trying.

Your opening <div> tag should have an id attribute set to menu.

Welcome to fCC Forum @niamotullah !

Please try the following to resolve the problem?

  • Reset step
  • Refresh page (F5)
  • Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests.
  • If you are having problems, recommendation is to disable extensions that modify the content or layout of pages, while taking the course.
    • Try a different browser.

Happy coding!

1 Like

Do you have any sort of browser extensions installed? This is a pretty straightforward test. But it is only expecting one div to be in the HTML. Is there a chance that a browser extension is adding a hidden div? Right click on something in the preview pane and then click inspect to open the dev tools inspector. Inside the iframe that the preview is nested in, do you see more than one div element? If so, then that is most likely your issue.

1 Like