Teoría
Teoría

Agregamos un contenedor

Ya distribuimos el contenido principal. Ahora vamos con el pie de página.

El fondo del pie ocupa todo el ancho de la página, pero su contenido solo debe ocupar una parte y estar centrado.

Para centrar el contenido sin cambiar el fondo, ajustaremos el marcado: envolveremos el contenido del pie en un contenedor adicional y centraremos ese contenedor.

Usaremos <div>, que no tiene significado semántico propio y resulta adecuado para agrupar este contenido. Estos contenedores suelen llevar la clase container o wrapper.

Le daremos un ancho y márgenes automáticos a la derecha y a la izquierda. Para los márgenes usaremos la forma abreviada:

margin: 0 auto;

Cuando margin tiene dos valores, el primero se aplica a los márgenes verticales y el segundo, a los horizontales. Equivale a escribir:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

La forma abreviada con dos valores se usa mucho para centrar elementos. En otras situaciones, suele ser preferible evitarla para que el código resulte más fácil de leer.

Agregaremos el contenedor al marcado y definiremos su ancho y sus márgenes.

¿Por qué usamos margin: 0 auto en vez de margin: auto? Para una caja de bloque normal que no sea un elemento flex, no hay diferencia. En flexbox sí la hay: margin: 0 auto centra el elemento solo en horizontal, mientras que margin: auto lo centra tanto en horizontal como en vertical.

Aunque ahora trabajemos con una caja de bloque, el tipo de su elemento padre podría cambiar en el futuro. Por eso conviene indicar siempre los dos valores de margin.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="portfolio-decorative.css"> <link rel="stylesheet" href="portfolio-outline.css"> <link rel="stylesheet" href="style.css"> <title>Portafolio</title> </head> <body> <header class="page-header"> <h1 class="title">Mapache No Identificado</h1> <p class="subtitle">Desarrollador web junior</p> </header> <main class="page-main"> <section class="bio"> <h2 class="section-title">Un poco sobre mí</h2> <p>Puedo crear páginas web o no crearlas. Puedo hacer que otros las creen y atormentar a quienes lo hacen mal.</p> <p>Puedo explicar por qué el presupuesto para crear 10 páginas alcanzó para 2 (una de ellas hecha por voluntarios) y todavía falta pagarle al diseñador por el desgaste del mouse. Puedo lograr que me crean.</p> </section> <section class="photo"> <h2 class="section-title">Fotografía</h2> <img src="img/avatar.svg" width="200" height="200" alt="Foto de Mapache No Identificado"> <p class="photo-caption">Mapache No Identificado Jr.</p> </section> </main> <footer class="page-footer">  <p class="contacts"> <a href="mailto:unknown@raccoon.ru">unknown@raccoon.ru</a><br> <a href="tel:+7999999999">+7 999 999-99-99</a> </p> <p class="copyright">© Mapache</p> <img class="logo" src="img/raccoon_logo.svg" width="70" height="54" alt="Logotipo del mapache">  </footer> </body> </html>

CSS

body { margin: 0; } .page-main { display: flex; justify-content: space-between; width: 550px; margin-right: auto; margin-left: auto; } .bio { width: 270px; padding: 10px; } .photo { width: 200px; padding: 10px; }

ObjetivosRealizado

Envuelve todo el contenido del pie de página en una etiqueta <div> con la clase container.
En style.css, crea una regla para la clase container y define un ancho de 550px para ese contenedor.
En la misma regla, agrega márgenes horizontales automáticos y pon en cero los márgenes verticales.