salut,
Excuse moi, mais là tu devrais commencer par te concentrer sur les bases, te focalise pas sur le bandeau à gauche, commence par corriger les erreurs  :
- balise header qui est placé n'importe où
- accent dans tes nom de classe CSS (?!?) Oublie les accents, ca n'existe plus quand tu code.
...

ensuite, pour te faciliter la vie et celle de ceux qui vont t'aider, utilise : https://jsfiddle.net/

Bon courage

Oublie les accents, ca n'existe plus quand tu code.

Peu de monde en utilise, mais ce n'est plus restreint techniquement depuis CSS2 (pour un nom de classe, on peut mettre tout Unicode, emoji récents inclus moins une partie de ASCII).

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]).

En dehors du contexte de CSS, Javascript accepte aussi Unicode dans les noms de fonctions et variables, avec quelques conditions supplèmentaires − il y a tout de même le champ pour mettre des choses comme des caractères invisibles, ce qui est pratique pour l'obsfuscation. Au passage, je viens de voir que les règles ont légèrement changé avec ES6.