section.hero
width: 100%;
height: calc(100vh - 67px);
occupe l'écran au complet, sans passer par div.inner
(voir les sections suivantes pour le principe du .inner).
<section> — arrière-plan pleine largeur
Le fond de cette section touche les deux bords de l'écran. Son contenu, lui, reste dans div.inner : max-width: 1200px, centré, avec du padding à gauche et à droite.
Même patron, couleur différente
Chaque section suit exactement la même structure : <section> pour la couleur de fond, <div class="inner"> pour la largeur du contenu. Seule la variable de couleur change.
Rétrécissez la fenêtre
Sous 640px, la navigation passe en colonne et l'espacement vertical des sections diminue. Le contenu ne dépasse jamais la largeur de l'écran, peu importe la taille.