Learn Basic CSS by Building a Cafe Menu - Step 12

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
In this step, CSS is to be used to center align the h2 and p elements. The instructions state: “Center the h2 and p elements by adding a new type selector for each one to the existing style element.” I may be missing something trivial, but I cannot seem to find where my error is. I receive a hint that reads: “You should not add a new style tag. Add the new CSS rules to the existing style tag.” There was no new ‘style’ tag added, however. All selectors are within the original ‘style’ tag.

Where have I gone astray?

Thank you!

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/107.0.0.0 Safari/537.36

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

Link to the challenge:

2

Welcome to our community!
Follow the instruction: "
image
Your code should look like this:

h1, h2, p {
    property is 'text-align' : value is 'center' ;
}
1 Like
3

Thank you for your response and for the kind welcome!

I had thought that separating the selectors with commas would work, but it resulted in an error and this hint: “You should not change the existing h1 selector.”

My new portion for the markup is as follows:

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

I have found a workaround to this situation; however, I am not certain as to what, precisely, was causing the problem in this situation. The ‘h2’ and ‘p’ selectors did have to be individual statements, but I could not solve this exercise in Google Chrome. After entering the same exact lines of code in code in Safari, the exercise was successfully completed. Like I said: I would view this as a workaround, but not necessarily a solution (especially in the case of individuals who only use Google Chrome).

I hope that this is helpful to someone.

5

they asked for a new type selector for -each one-.

(so three total , one for each element)

6

Your original 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.

1 Like
7

Thank you for the reply. This was my original approach, but it was unsuccessful until I did the same in Safari. This seems to be an issue in Google Chrome for macOS (at least in my case).

1 Like
8

I investigated this further based off of what you said. This was indeed an extension issue. i use a Chrome Extension called “Dark Reader” to enforce Dark Mode across websites as it is easier to read with what little vision I have. I disabled this and turned on freeCodeCamp’s Night Mode feature.

Thank you!

1 Like
9

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