Proyecto informatico

En el archivo principal index.html, hay que conectar el archivo .css en el head para que hagan efecto los estilos. 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Mi primer pagina</title>
</head>
<body>
    <h1>Mi primer pagina</h1>
</body>
</html>

BOX MODEL

Este modelo se usa para definir los espacios, las distancias entre elementos y que quede mas ordenado. El contenido podria ser un texto. El padding es la distancia que dejás entre el borde y el texto. Es hacia adentro. Al borde se le define un grosor y color, que puede ser solido o degradado. Ejemplo: border: 1px solid black;
El margin es la distancia que dejás entre el borde y los demás elementos. Es hacia afuera.

Podés probar interactuando con el modelo de caja de abajo para entenderlo mas visualmente.

MARGIN
BORDER
PADDING
CONTENT

MODIFICÁ EL ESTILO DE ESTE TITULO

Podés usar el siguiente formulario para modificar el box model con detalle

FLEXBOX

Para convertir un div en flexbox, se le agrega la propiedad display: flex;

A
B
C
D
                        .container-example {
    display: flex;
    flex-direction: row;
    padding: 20px;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    border: #167afb solid 3px;
}