Problemes avec Grid

bonjour à tous,
dans le cadre d'amélioration de mon site, ayant des problèmes d'affichage je suis en train d'essayer le passer à l'utilisation de fenêtres GRID en passant par le site "gridbyexample.com" mais comme je suis toujours aussi nul en programme et que mes 86 ans associé a mon incompréhension totale de l'anglais, j'ai beaucoup de mal malgré translate de Google à trouver les subtilités de cette installation.
J'essaye d'installer l'exemple "Defining Grid Areas" en ayant la partie Sidebar sur toute la hauteur, Header avec le titre sur 1 ligne et Content avec toutes les explications à suivre.
Mon problème, sans savoir quelle erreur j'ai pu commettre bien que l'affichage avec Grid, mais avec beaucoup d'essais correspond à ce que je voulais, mais tout n'est pas parfait en ce bas monde ! ! ! la fenêtre présentationt avec le code overflow-y:scroll ne fonctionne pas d'une façon indépendante, mais verticalement avec le reste de l'affichage du site, ce qui empêche le défilement seulement dans cette fenêtre et l'utilisation de fermer la fenêtre presentation en cliquant sur la fenêtre.
je ne sais si c'est possible et que je demande de choses qui n'existent pas encore.
la situation actuelle est visible à l'adresse :
https://manifestation.cisalpin.com/index.html
( le fait que les photos ne sont pas affichées ne changent rien à l'affaire, c'est le principe qui est juste)
la nouvelle version que je teste est visible à l'adresse :
http://www.fleur.cisalpin.com/index.html
(l'affichage correspond tout a fait a ce que je voudrais, mais le fonctionnement est défectueux.
Merci d'avance de vos avis sur les possibilités d'arriver à mes fins.

Bonjour,
rapidement, pour répondre à la question.
Pour ce qui est de la sidebar qui se déplace avec la page de droite, il faut qu'elle soit en position:sticky;
Et il faut aussi lui donner une dimension maximum, par exemple max-height:600px;
Et overflow:scroll; suffit à mon avis, sans le "y".
Sinon,
il faut mettre dans le head du html la balise : <meta name="viewport" content="width=device-width, initial-scale=1"> principalement pour les mobiles.
Un fichier css à part et indenté, ce serait plus clair pour s'y retrouver. Le html aussi indenté pour plus de lisibilité.
Il y a beaucoup, beaucoup à voir dans le html. Des div partout, des dimensions en px pour les boîtes principales, des liens qui ne fonctionnent pas, la page principale qui déborde, avec deux ascenseurs horizontaux, le manque de déclaration de la dimension de la page dans le css. Aussi les dimensions maxi des éléments img (max-width:100%; height:auto;) En mode mobile, c'est la cata, essentiellement à cause de la balise manquante donnée plus haut. De plus, je ne comprends pas trop l'utilité de JavaScript dans un site simple et sans effets marquants. Je ne saurai par où commencer.
Mais ça vaut le coup, tout ce qui est demandé existe et un peu de ménage devrait réussir à faire fonctionner le site correctement.
À plus, d'autres vont donner des conseils.

Bonjour Bongata et merci de ta prompte réponse,
je dois préciser que je réalise mon site de façon tout a fait empirique, j'ai extrêmement de mal à mémoriser les enchainements multiples et vu mon age et mon ancien emploi de décolleteur, je suis habitué dans mon esprit à faire des opérations indépendantes.
Je pense que pour ceux qui maitrisent html, mon programme set un fouillis sans nom, mais cette façon de procéder cas par cas est ce que j'assimile le mieux. Pour ce qui est du javascript, c'est le fils d'un ami qui me les a proposé et que j'utilise sans en comprendre un traite mot, mais sa fait fonctionner certaines choses......
Je vais essayer les changements que tu propose , je te remercie encore d'avoir pris un peu de ton temps

Quelques petites améliorations. C'est du dégrossissage, je n'ai pas touché aux div ni à grid. Il reste beaucoup à faire, notamment pour les mobiles. J'ai juste remis un peu le site sur pieds.

Enlevé le scroll sur la page "description". Ça nous donnait deux ascenseurs sur la page principale ! À moins que vous ne les vouliez.
Mis un with:100%; à cette page (qui débordait largement sur la droite avec un width: 1650px).
Mis une hauteur auto à cette page.
Indenté le html et le css.
Mis un padding de 40px à la page "explication" (pour aérer le texte dans son container).
Supprimé les <br> au milieu de ce texte. Ajuster la longueur des lignes les unes par rapport aux autres avec des <br> est scabreux, ça donne des résultats aléatoires. Et <br> ne s'écrit pas </br>. Ce n'est pas une balise à fermer.
Enlevé les </span> seuls et sans aucune utilité là où ils étaient.
Mis un Doctype moderne et simplifié, avec l'utf-8.
Préparé les @media pour les mobiles. Il faudra mettre du css ici si vous voulez apparaître sur les mobiles (pour plus tard...)
Un jour, il faudra aussi mettre la balise pour la langue tout en haut du html.
Dans le bas de la page de gauche, quand on clique sur le lien du compteur, on est envoyé vers des images !
Je ne sais pas à quoi sert le lien "Cliquer sur la fenêtre pour la fermer". En plus, il est mal placé.
Ayant testé sur un html à part, je n'ai pas les images à disposition. Elles devraient s'adapter à la page.
Le fichier corrigé va suivre, mais vous pouvez déjà corriger un peu afin de constater les effets.

Quelques petites améliorations. C'est du dégrossissage, je n'ai pas touché aux div ni à grid. Il reste beaucoup à faire, notamment pour les mobiles. J'ai juste remis un peu le site sur pieds.

Enlevé le scroll sur la page "description". Ça nous donnait deux ascenseurs sur la page principale ! À moins que vous ne les vouliez.
Mis un with:100%; à cette page (qui débordait largement sur la droite avec un width: 1650px).
Mis une hauteur auto à cette page.
Indenté le html et le css.
Mis un padding de 40px à la page "explication" (pour aérer le texte dans son container).
Supprimé les <br> au milieu de ce texte. Ajuster la longueur des lignes les unes par rapport aux autres avec des <br> est scabreux, ça donne des résultats aléatoires. Et <br> ne s'écrit pas </br>. Ce n'est pas une balise à fermer.
Enlevé les </span> seuls et sans aucune utilité là où ils étaient.
Mis un Doctype moderne et simplifié, avec l'utf-8.
Préparé les @media pour les mobiles. Il faudra mettre du css ici si vous voulez apparaître sur les mobiles (pour plus tard...)
Un jour, il faudra aussi mettre la balise pour la langue, tout en haut du html.

Dans le bas de la page de gauche, quand on clique sur le lien du compteur, on est envoyé vers des images !
Je ne sais pas à quoi sert le lien "Cliquer sur la fenêtre pour la fermer". En plus, il est mal placé.

Ayant testé sur une page à part, je n'ai pas les images à disposition. Elles devraient s'adapter à la page.