Centrer une image au centre de la page internet et qui s'adapte

Bonjour,

J'aimerais intégrer dans mon site internet une image, que j'aurais besoin de centrer et qui s'adapterais à toute les dimensions des pages internet ainsi qu'à un smartphone.


J'ai suivi le tutoriel de Mr.Giraud sur Youtube
Vidéo : https://www.youtube.com/watch?v=4oqK1Ql4PvA
Regarder à partir de 24:00m quand il écrit " @media screen and ... ".

Il explique en écrivant ce code ( avec ce qu'il avait déjà fait précédemment durant sa vidéo ) cela s'adapterais au dimension de différente écran.. Cependant après plusieurs essaye je n'arrive toujours pas à adapter mon contenue à la dimension de l'écran.

Avez vous une solution ?

Voici mon contenue quand il n'est pas en pleine écran



Voici le contenue quand j'agrandi la page en pleine écran



J'aimerais que la bananière rouge rétrécisse quand je le mette en pleine écran parce que du coup après on ne voie plus le bouton et le reste prend toute la page..

Si vous avez une idée je suis preneur, le plus important c'est d'adapter mon contenue au dimensions des écrans

Merci d'avance :)