Learn Basic CSS by Building a Cafe Menu - Step 25

Tell us what’s happening:
I don’t know what’s wrong with my code. It says to set margin-left and margin-right to auto. Which I think I did but the code failed. The hint says:
" You should set the ‘margin-left’ property to ‘auto’ ."

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>
    <div>
      <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;
}

<body>
div {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.26

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

Link to the challenge:

Welcome to our community!
Your ‘div’ element is wrapped with ‘body’ tags. Don’t add body tags. Your code is functional without the opening ‘body’ tag above ‘div’ selector, and the closing ‘body’ tag after the closing curly brace of ‘div’ selector.

1 Like

I see! Thank you it worked! The instructions did say " center the ‘div’ element within the ‘body’ element." I just needed to up my reading comprehension!

1 Like