Learn Basic CSS by Building a Cafe Menu - Step 12

HTML-CSS
1

Tell us what’s happening:
For some reason it tells me that i should not make a new style tag but i havent! I’m using the one i already have and even if i reset the code it tells me the same thing…

(By the way, to save time, this is the lesson where you have to center all the elements in the page of the Cafe, shortly after you are done with the CatPhotoApp portion of the course)

I’m clueless!
Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
      <style>
      h1 {
        text-align: center;
      }
      p {
        text-align: center;
      }
      h2 {
        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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

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

Link to the challenge:

2

The instruction says: “Center the h2 and p elements by adding a new type selector for each one to the existing style element.”
So, the order of selectors is h1, h2, p.
You have put h1, p, h2.

3

Same thing happens, tried to rearrange the order many times but i’m still getting the same error…

The message says

" Hint

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

Even if i reset the code and send the result without my imput i get the same “hint”.

4

Your solution as quoted here works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

5

It was indeed one of the extensions i was using. I was using a DarkMode extension for my browsing and as soon as i turned it off, it worked!

I guess i didn’t expect that to happen, will keep that in mind, thanks for helping me!

1 Like
6

yes. The extensions are mentioned in the front page of the curriculum as something to watch out for.

7

Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.

you can see this note in the curriculum page above the project list

8

I legitimately forgot, pretty dumb on my part! I will keep this and other warnings in mind for the next time… :smile:

Thank you for taking the time to help me!

1 Like
9

sorry i wasn’t pointing it out to make you feel bad. just for the record so when people see the thread they know…

10

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