Learn Basic CSS by Building a Cafe Menu - Step 25

HTML-CSS
1

I’m a bit confused on where the margins are and also where to put the autos

Your code so far

/* file: index.Ext.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 id="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>

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

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

#menu {
  width: 80%;
  background-color: burlywood;
}

Your mobile information:

TECNO PR651E - Android 11 - Android SDK 30

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

Link to the challenge:

2

So to answer this question yourself, you can look back at these instructions:

Next, you want to center the #menu horizontally. You can do this by setting its margin-left and margin-right properties to auto .

Based on your reading, which element are we being asked to modify?
So where does our new code go?

1 Like
3

See here buddy you need to define the properties which you are instructed in instruction.

When you will put margin-left and margin-right as auto.

Then your whole menu will get centered.

Hope You Understand.

4

Hello @Sammy2 !

You have already received good guidance in the previous posts, I am enclosing a link to an article that clearly explains the margin, border, and padding properties. It has good examples, and guidance to help us learn these properties better.

Wishing you good progress on your coding journey! :slightly_smiling_face: