Mon site ne s'affiche pas correctement sur mobile

Bonjour,

Je suis chargé de réaliser un site web responsive. J'utilise Bootstrap, que j'ai légèrement modifié en ajoutant un second fichier CCS.
Lorsque que je redimmensionne mon navigateur sur Google Chrome et Microsoft Edge, le site s'adapte correctement. Cependant, lorsque j'accède au site sur mon smartphone ou sur ma tablette, les éléments ne sont plus à leur place et les pages ne sont plus reponsive du tout.

Lien du site : https://tout-en-anglais.fr/

Le problème est surtout présent sur la page d'accueil. J'utilise Flexbox pour positionner les éléments et l'attribut flex-wrap me permet de me passer des média queries (pour le plus gros du travail).

Voici plusieurs captures d'écran du site sur l'émulateur responsive de Google Chrome :
https://tout-en-anglais.fr/captures-forum/capture1.png
https://tout-en-anglais.fr/captures-forum/Capture2.PNG
https://tout-en-anglais.fr/captures-forum/Capture3.PNG
https://tout-en-anglais.fr/captures-forum/Capture4.PNG
https://tout-en-anglais.fr/captures-forum/Capture5.PNG
https://tout-en-anglais.fr/captures-forum/Capture6.PNG

Il devrait donc être identique lorsque j'y accède sur mobile / tablette, mais ce n'est pas le cas. Voici à quoi ça ressemble :
https://tout-en-anglais.fr/captures-forum/capture-tel1.PNG
https://tout-en-anglais.fr/captures-forum/capture-tel2.PNG
https://tout-en-anglais.fr/captures-forum/capture-tel3.PNG
https://tout-en-anglais.fr/captures-forum/capture-tel4.PNG
https://tout-en-anglais.fr/captures-forum/capture-tel5.PNG

On remarque que deux <div> container ne suivent pas le contenu : le bloc gris et le bloc bleu de la fin. Alors que sur l'émulateur du navigateur, ils s'adaptent correctement.

Voici le code htm de ces 2 container :

<!-- Container 2 (le gris) --> 
<div class="container-fluid accueil-container2">
  <h1 class="accueil-container2-titre">Commencez en douceur</h1>
  <div class="container col-11 accueil-container2-box1">
    <div class="container col-7 accueil-container2-box2">
      <p class="accueil-container2-box2-text">Nous vous avons préparé la liste des 5 secrets pour apprendre l'anglais rapidement et en s'amusant</p>
      <button id="btn-popup-accueil" type="button" class="btn btn-success accueil-container2-box2-btn btn-lg">Découvrir les 5 secrets</button>    
    </div>
    <img src="https://tout-en-anglais.fr/ressources/page-accueil/5-secrets-illustration.png" alt="illustration fiche PDF" class="accueil-container2-box1-image">
  </div>
</div>

<!-- Container 4 (le bleu, à la fin de la page)-->
<div class="container-fluid accueil-container4">
  <h1 class="accueil-container4-titre">Nos meilleurs conseils, gratuits</h1>
  <div class="container col-11 accueil-container4-box1">
    <div class="container accueil-container4-box2 col-6">
      <p class="accueil-container4-box2-text">Nous vous proposons nos meilleurs conseils gratuitement pour commencer votre apprentissage dès maintenant</p>
      <a href="https://tout-en-anglais.fr/blog/">
        <button type="button" class="btn btn-success accueil-container4-box2-btn btn-lg">Accéder au blog</button>
      </a>
    </div>
    <img src="https://tout-en-anglais.fr/ressources/page-accueil/illustration-blog.png" alt="" class="accueil-container4-box1-image">
  </div>
</div>

Et leur code CSS (sachant que j'utilise aussi bootstrap) :

/* Container 2 */

.accueil-container2
{
    background-color: #e8e8e8; 
    padding-right: 0px; 
    padding-left: 0px;  
    padding-top: 40px; 
    margin-top: 0px; 
    display: flex;
    flex-direction:  column; 
    align-items: center; 
}

.accueil-container2-titre
{
    margin: 0px 0px 0px 0px; 
    font-size: 55px; 
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

.accueil-container2-box1
{
    border: none black solid 3px; 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    padding: 0px 0px 0px 0px; 
    margin-top: 20px;
    margin-bottom: 40px;  
    flex-wrap: wrap-reverse;  
}

.accueil-container2-box1-image
{
    border: none solid 3px black; 
    width: 300px; 
    height: auto; 
    box-shadow: 0px 0px 50px #777777; 
    margin: 20px 0px 20px 0px
}

.accueil-container2-box2
{
    border: none solid 3px black; 
    margin: 20px 0px 0px 0px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items:center; 
}

.accueil-container2-box2-text
{
    font-size: 28px; 
    text-align: center; 
    font-family: 'Raleway', sans-serif;
}

.accueil-container2-box2-btn
{
    cursor: pointer; 
    margin-top: 20px; 
}

/* Container 4 */
.accueil-container4
{
    background-color: #4fc3f7; 
    margin: 0px 0px 0px 0px; 
    padding: 20px 0px 0px 0px;  
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.accueil-container4-titre
{
    font-size: 45px; 
    font-family: 'Raleway', sans-serif;
    color: white; 
    text-align: center;
}

.accueil-container4-box1
{
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
    border: none black 3px solid; 
    display: flex; 
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap-reverse; 
}

.accueil-container4-box2
{
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
    border: none black 3px solid; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

.accueil-container4-box2-text
{
    font-size: 28px; 
    font-family: 'Raleway', sans-serif;
    color: white; 
    text-align: center; 
}

.accueil-container4-box2-btn
{
    margin-top: 20px;
    margin-bottom: 20px; 
    cursor: pointer; 
}

.accueil-container4-box1-image
{
    width: 300px; 
    height: auto; 
    box-shadow: 0px 0px 50px #777777;
    margin-bottom: 30px; 
}

De plus, je rencontre aussi un problème similaire avec le navigateur Internet Explorer, les éléments ne sont plus à leur place (la taille des images est modifiée).

J'ai tout essayer avec la balise meta viewport mais le problème ne semble pas venir de là.

Si vous avez une idée, je suis preneur.
Merci d'avance