Learn Basic CSS by Building a Cafe Menu - Step 25

HTML-CSS
1

Tell us what’s happening:

Blockquote Next, you want to center the div horizontally. You can do this by setting its margin-left and margin-right properties to auto. Think of the margin as invisible space around an element. Using these two margin properties, center the div element within the body element.

Don’t know how to center it…

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; rv:106.0) Gecko/20100101 Firefox/106.0

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

Link to the challenge:

2

Within the body means that you have to center both margins. Don’t add ‘body’ tags in your css code. They don’t belong there. Plus, put always a semi-colon at the end of the line: e.g. margin-left: auto;

1 Like
3

Got it.

Just passed it too :sunglasses:

4

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