Cuéntanos qué está pasando:
Describe tu problema en detalle aquí.
Ahora centraremos horizontalmente él div. Puedes hacer esto, dándole el valor auto a las propiedades margin-left y margin-right (margen-izquierdo y margen-derecho). Piensa en el margen como un espacio invisible alrededor de un elemento. Usando estas dos propiedades de margen, centra el elemento div dentro del elemento body.
Tu código hasta el momento
<!-- 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 {
/* User Editable Region */
background-color: burlywood;
/* User Editable Region */
}
h1, h2, p {
text-align: center;
}
div {
width: 300px;
}
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 OPR/100.0.0.0
Challenge: Aprende CSS básico construyendo un menú de cafetería - Paso 22
Enlaza al desafío: