Learn Basic CSS by Building a Cafe Menu - Step 12

HTML-CSS
1

Tell us what’s happening:
I keep receiving “Hint: You should add a new h2 selector.”
I’ve tried a few other things in addition to this—including (but not limited to) the following:

  • adding a line break in between the first “{” and type selector (of each element)—but that returns the previous hint or the following: Hint: Your h1 element should have a text-align of center.
  • rewriting all elements within one set of curly braces
    h1, h2, p {
    text-align: center;
    }
    but that gives me the following error message “Hint: You should not change the existing h1 selector.”

:face_with_spiral_eyes: What’s wrong with my code? :face_with_spiral_eyes:

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>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hi!
I think that you should remove everything in the style element and write again.
Hope this helped!

3

Tried it. I receive the following message:

_ Hint: You should not change the existing h1 selector._

Unfortunately, it didn’t help… :frowning_face:

4

Could you copy and paste your new code from the beginning of style element to the end please?

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

I also tried this (in the hopes that the line breaks might help—though I doubt they should):

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

  h2 {
    text-align: center;
  }

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

This game me the following message:

Hint: You should not change the existing h1 selector.

8

This one gave me the following message:

Hint: You should add a new h2 selector.

9

Very strange, because when I copied your code and used it, it worked…

10

Maybe you should try to use another browser?
Have you tried it?

11

I remember having problems using safari, so now I am using Google Chrome.

12

I was using Brave—it failed.
I tried Firefox and it’s working now. Thanks!

13

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