Learn Basic CSS by Building a Cafe Menu - Step 25

HTML-CSS
1

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

Your code so far
please how do i create the left and right margins???
how to i go forward?

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

auto div {
  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/107.0.0.0 Safari/537.36

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

Link to the challenge:

2

i want you to click reset here again.

you seem to be lost and not really understanding what is happening so let me try to explain a bit.

This is CSS code that you are learning now.
It works by creating rules that select the elements in the html and setting their display properties.

To select an element, you need to create css rules like

h1, h2, p {
}

These say that you want to select all the h1 and h2 and p elements.

When you reset the code for this exercise you will see the original code here was

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

Which is saying that we are selecting all div elements.

Then the code inside the braces is telling the browser what special display properties we need to apply.
The first rule says something about the width being 80% of the size of the parent element.
The second rule gives a background-color to the div element.

Now you need a third line that sets the margin-left to auto and a 4th line that sets the margin-right to auto

The two lines should be underneath the background-color line and have a similar style.

The name of the property followed by colon then the value of the property.

Please try again. If you don’t understand something feel free to ask us.
(I don’t want to hand-hold you but I want you to really think about what you are doing and why you are doing it)

3

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