Aquí tens l’explicació detallada en format text del bloc CSS que defineix el contenidor principal amb estructura 2/3 – 1/3, és a dir, el contingut principal i la barra lateral. Aquest disseny és molt habitual en pàgines informatives o blocs.

🧱 Estructura de contingut 2/3 – 1/3 amb Flexbox

1. Subtítols (h2, h3)

h2, h3 { /* Estils per als subtítols */
            margin-bottom: 15px; /* Margen inferior */
            color: #2c3e50; /* Color blau fosc */
        }

Afegeix espai inferior per separar els títols del contingut següent.

• El color #2c3e50 és un blau fosc elegant, que dona contrast i jerarquia visual.

2. Paràgrafs (p)

 p { /* Estils per als paràgrafs */
            margin-bottom: 15px; /* Margen inferior */
        }

Espai entre paràgrafs per millorar la llegibilitat i evitar que el text quedi massa compacte.

3. Contenidor general (.content)

    .content { /* Contenidor per al contingut principal i la barra lateral */
            display: flex;  /* Utilitza Flexbox per al layout */
            margin: 20px 0; /* Margen vertical */
            gap: 20px; /* Espai entre el contingut principal i la barra lateral */
        }

Utilitza Flexbox per col·locar el contingut principal i la barra lateral en línia horitzontal.

• margin: 20px 0 afegeix espai vertical abans i després del bloc.
• gap: 20px crea espai entre les dues columnes, evitant que quedin enganxades.

4. Contingut principal (main)

 main { /* Contingut principal */
            flex: 7; /* Ocupa 70% de l'espai disponible */
            background: white; /* Fons blanc */
            padding: 25px; /* Espaiat intern */
            border-radius: 8px; /* Cantonades arrodonides */
            box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Ombra suau */
        }

Ocupa el 70% de l’amplada disponible gràcies a flex: 7.

• Fons blanc per destacar el contingut.
• padding: 25px afegeix espai intern per evitar que el text toqui les vores.
• border-radius: 8px dona cantonades arrodonides, fent-lo més agradable visualment.
• box-shadow afegeix una ombra suau per donar profunditat.

5. Barra lateral (aside)

   aside { /* Barra lateral */
            flex: 3; /* Ocupa 30% de l'espai disponible */
            background: #e9ecef; /* Fons gris clar */
            padding: 25px; /* Espaiat intern */
            border-radius: 8px; /* Cantonades arrodonides */
            box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Ombra suau */
        }

Ocupa el 30% de l’amplada disponible amb flex: 3.

• Fons gris clar per diferenciar-la del contingut principal.
• Té el mateix padding, border-radius i box-shadow que el main, mantenint la coherència visual.

Aquest layout és ideal per a escriptori, i més endavant podràs adaptar-lo amb @media queries perquè en mòbil el aside aparegui sota el main.