Learn Basic CSS by Building a Cafe Menu - Step 25

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

Hi!

Sorry if this has already been asked! I tried to look for older posts but most things I found didn’t have a question attached. My question is, in file.styles.css I am struggling to set the margins. I have tried multiple ways (that I could think of to get this to work). No matter what I do, whether it’s putting the margins at the bottom or top, it says I need to set the margin-right property to auto. (in some cases, it said I needed to set the margin-left property to auto.) I have reviewed, and restarted multiple times. It seems no matter what I do, I’m unable to get that margin-right to set to auto. I was initially trying it the way most other people were, by just adding it to the previous entered code, I found this would remove the “highlight” of the previous code, additionally, when entered this way, Margin-right is not highlighted (Color coding to show interaction) at all. So I figured that was wrong and wrapped them in their own {}.

However, no matter how I enter it, it seems to not want to set the margin-right to auto.

Thanks in advance!

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

div {Margin-left:auto} {Margin-right:auto}
  {width: 80%;
  background-color: burlywood;
}

Your browser information:

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

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

Link to the challenge:

please click Restart Step as what you have is incorrect and it is easier to explain from scratch.

You are presented with this code

div {
  width: 80%;
  background-color: burlywood;
}

This is a div selector.
Each line within this block is a css property.
You are asked to add 2 more css properties.
margin-left and margin-right

Therefore add these properties, one per line below the background-color line (but above the closing brace)
and give them each the value of auto

Use the previous lines to guide you. Make sure you use the exact keywords and values.

2 Likes

Hi!

Thanks so much for your response!

I had tried it that way, but forgot to add ; after margin-left, so margin-right could not be set to auto.

Your mention of using previous lines to guide me helped so much!

2 Likes