Learn Basic CSS by Building a Cafe Menu - Step 25

HTML-CSS
1

Tell us what’s happening:

Hint

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

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; 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

to this div element u have to give margin-left and margin-right property value to auto

3

I still do not understand pls

4

Hi there! What is the question that you want us to help you with? Please be specific.

5

I don’t know where the margins are, and how to set it to “auto”

6

The code block here is the one you are editing.
image

Notice which element has the background color of burlywood?

image
image787×217 4.99 KB

Have a rummage on some documentation for syntax on margin or check out youtube.

Centering the div will look like this

image
image779×154 4.79 KB

7

Ok, thanks let me check it out.

8

Thank you, passed it!

1 Like
9

you will want to use the same code as you are with your width.
Drop down a line and put in your “margin-left”. instead of 80% you will need to type the word “auto”. You will create another line with “margine-right”. You are just telling it where to put your words. I hope this helps.

1 Like
10

Thanks Ashley. It was really helpful.

1 Like
11

Mod edit: Solution removed

12

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

13

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