Learn Basic CSS by Building a Cafe Menu - Step 26

Tell us what’s happening:
Describe your issue in detail here.margin-left property should be set to auto
I did that but would like little help

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>
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <main>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>
/* file: styles.css */
body {
  /*
  background-color: burlywood;
  */
}

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

margin-left{auto: center;

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

Your browser information:

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

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

Link to the challenge:

do you see how the first selector of h1,h2,p is so neatly written?
There is an empty line before it and an empty line after the last } brace?

Please make your code lookd neat.
Make sure you put the styles on a separate line ( do not smush them with the selector).

Once you are done organizing, please re-post the code for another review if you cannot see where you went wrong (sometimes when we tidy things up, the mistakes reveal themselves)

Tell us what’s happening:
Describe your issue in detail here.margin-left property had been sent to auto but still won’t proceed on
stuck here***

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>
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <main>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>
/* file: styles.css */
body {
  /*
  background-color: burlywood;
  */
}

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

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

} margin-right

Your browser information:

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

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

Link to the challenge:

In this case margin-left and margin-right are not elements in your index.html code.
(correct?)
So they cannot be selected by the browser.
Instead you want to define them as style properties inside the div block.

so add them like this:
margin-left: auto; inside the div block (same for the margin-right)

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