Learn Basic CSS by Building a Cafe Menu - Step 12

HTML-CSS
1

Tell us what’s happening:
The objective is to center the h2 and p elements by adding a new type selector for each of them to the existing style element.

My reasoning is that whatever worked for the h1 element that I centered should work for the h2 and p elements as well, but the test will not accept my code. I am beyond frustrated and don’t know where to put the code or what to put.

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 (Windows NT 10.0; Win64; x64) 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

I think you might have stumbled upon a bug in the tests. Let me do a little more testing and I’ll get back to you.

3

UPDATE: This appears to be an issue specific to Firefox as I am passing with your code using Chrome. But I am definitely failing with Firefox. So if you want to officially pass this step then try switching to a different browser.

4

I’m not so sure. I just tried the same code in the same test on Microsoft Edge, Firefox and Chrome and I get the same result each time. I was actually doing the test in chrome, but a weird thing is that my chrome icons on my toolbar are for Internet Explorer. Do you think there could be some connection?

5

OK, forget everything I said above, I figured it out. You don’t happen to have a browser extension installed that modifies the page in some way, do you? If so it is probably injecting an extra style element into the page which is fooling the tests into thinking you added an extra style element in the HTML. So if you want to officially pass this step then you’ll need to disable any extensions that are messing with the styles on the page.

Otherwise, just know that you got it right and move on. But be aware, these extensions may cause issues in other steps as well. Probably best to use FCC with a “clean” browser.

1 Like
6

OK, I’ll try a clean browser with no extensions. Thanks for taking the time to help.

EDIT: You were right. I removed the Dark Reader extension and it passed with the original code. Thanks again, Sir.

7

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