😭 Learn Basic CSS by Building a Cafe Menu - Step 13

Tell us what’s happening:
I literally copied this from a YouTube channel after 45 minutes of being stuck here, and it still fails. Whyyyyyyyyyyyy

Step 13

In the previous step, you used a type selector to style the h1 element. Center the h2 and p elements by adding a new type selector for each one to the existing style element.

ERROR: You should not add a new style tag. Add the new CSS rules to the existing style tag.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <style>
      h1 {
        text-align: center;
      }

      h2 {
        text-align: center;
      }
      
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <main>
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.37

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

Link to the challenge:

You have THREE (3) CSS rules. You should have ONE (1) CSS rule.

Don’t forget that you can use a comma between multiple selectors in a CSS rule

For example:

selector1, selector2, selector3 {
rule: action;
}

This helps clean up your code.

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

Thing is, that code was copied off of a video that shows it passing, so I’m confused as to how it worked for the guy and when I type it, it doesn’t?

I’ve tried:

<style>
  h1 {text-align: center;} h2 {text-align: center;} p {text-align: center;}
</style>

Fails

I’ve tried:

    <style>
      h1, h2, p {text-align: center;}
    </style>

Fails “You shouldn’t modify h1 selector”

I’ve tried:

    <style>
      h1, h2, p {
        text-align: center;
        }
    </style>

Fails, same error

I’m very confused-

<style>
  h1 { text-align: center; } h2 { text-align: center; } p { text-align: center; }
</style>

error: You should not add a new style tag. Add the new CSS rules to the existing style tag.

This is the wrong answer, but please do not attempt to post solutions. Thank you

These should work. I would make sure you are not running any extensions that break the tests, such as extensions that modify your CSS (dark mode is a common one).

1 Like

I will try running it on a different browser, will report back, thank you.

Worked immediately on FireFox. Thank you.

1 Like

For me the issue was dark mode!

Same here. Thought I was going crazy and suddenly couldn’t understand basic instructions lol.