Design a Cafe Menu - Step 7

HTML-CSS
1

Tell us what’s happening:

Hi, I’m currently on step 7 of Camper Cafe, which is centering the h1 element in CSS. As far as I can tell I’m doing everything correctly, and it shows up as centered in the preview, but when I check my code I get the error message that I should have an H1 selector in my style element. Am I doing something such that it doesn’t recognize the H1 selector I currently have? Thanks.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

  </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/143.0.0.0 Safari/537.36 Edg/143.0.0.0

Challenge Information:

Design a Cafe Menu - Step 7

2

Your h1 selector looks fine, but based on the <!--- User Editable Region ---> comments, it looks like you didn’t add the code in the right place.

Try resetting this step by clicking the reset button and putting only your h1 selector in the highlighted line here:

image
image398×562 29.9 KB

3

Thank you for your response! I tried it again but as far as I can tell it’s the same thing I was doing, just entering h1 {text align: center} in that line that it defaults to on reset. In the code, does it look like it’s not in the right place? I would like to understand how. I’m new to HTML and CSS so feel pretty helpless!

4

Your solution 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

Thanks so much, unfortunate glitch but changing browsers fixed it.