Learn Basic CSS by Building a Cafe Menu - Step 25

How do I center the div horizontally?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <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"/>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
/* 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 (Linux; Android 11; Infinix X693) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Mobile Safari/537.36

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

Link to the challenge:

1 Like

The instructions tell you how to do it:

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

If you do not understand those instructions then please explain a little more what you don’t understand.

I don’t know what the margin-left and right is for me to set it to auto

1 Like

Those are CSS properties you can set on an element, just like you set the width and background-color on the div already.

Ok, thank you. I’ve seen where I was wrong

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