Learn Basic CSS by Building a Cafe Menu - Step 27

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I’ve written this, but it still refuses to run :frowning:

Your code so far

<!-- file: index.html -->

<!-- User Editable Region -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class= "menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>

<!-- User Editable Region -->


/* file: styles.css */
body {
  /*
  background-color: burlywood;
  */
}

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

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15

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

Link to the challenge:

2

Post your entire HTML code here.

3

check again please, I’ve updated

5

try deleting the space after the equal sign

1 Like
6

that made no difference

7

can you post here all of your new code? You dont have to update the main post. Just use the format button which looks like </> then paste all your html between the lines it gives you

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

1 Like
8 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class= "menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>
9

Screenshot 2023-05-04 at 21.14.12
Screenshot 2023-05-04 at 21.14.121496×1084 68.1 KB

10

When I copy and paste your code it passes the challenge. There are a few steps you can try.

  1. Try restarting and refreshing the challenge to see if it will pass
  2. make sure you dont have any extensions running. Things like ad blocker, and dark mode can cause the challenge to fail.
  3. If none of the above work, then try submitting in the challenge in a different browser
11

will do
thank you so much

12

so I believe you need to close your div element on the same line. maybe?

13

yeah just close it out with </div>

14

Tell us what’s happening:
Describe your issue in detail here.
My issue still hasn’t been resolved. This particular step isn’t compiling.
I’ve tried different browsers too.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>

<!-- User Editable Region -->

    <div class="menu">

<!-- User Editable Region -->

      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>

/* file: styles.css */
body {
  /*
  background-color: burlywood;
  */
}

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

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15

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

Link to the challenge:

15

Screenshot 2023-05-04 at 22.09.57
Screenshot 2023-05-04 at 22.09.572940×1398 332 KB

16

Have you tried turning off every single browser extension? Have you tried incognito/private mode?

Side note, “compiling” isn’t the word you are looking for.

17

it didn’t work
the syntax is surely correct though

18

When I go to my step 27 all I put was <div class="menu"></div> and it sends me through. I am very new to this though. I am just on step 70 right now.

19

Unfortunately, it wouldnt make sense to do that. The challenge puts the closing div tag towards the bottom of the code. Should not have to move that closing tag in order to pass the challenge. @arthmohan have you tried everything Jeremy suggested?

20

Hi
I found the solution to the problem.
My code was completely correct, but I ran it in a different browser and it worked instantly. There was some problem with Safari.

1 Like
21

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