Why does the gap between my cards not work

Im new to wordpress so bear with me here. I have two cards which look fine on vscode but in wordpress the gap between the 2 is not right, the rest of the css is working fine though. Im using kadence theme, and simple css plugin. Here is my HTML: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Effect</title> <link rel="stylesheet" href="index.css"> <script src="https://kit.fontawesome.com/95a02bd20d.js"></script> </head> <body> <div class="container"> <div class="card"> <div class="face face1"> <div class="content"> <i class="fas fa-camera"></i> <h3 style="font-family:Didot, serif; ">PHOTOGRAPHIE</h3> </div> </div> <div class="face face2"> <div class="content"> <p style="font-family:Didot, serif; "> Chaque cliché devient une pièce maîtresse de votre stratégie</p> <a href="#" type="button">Read More</a> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <i class="fas fa-video"></i> <h3 style="font-family:Didot, serif; ">VIDEOGRAPHY</h3> </div> </div> <div class="face face2"> <div class="content"> <p style="font-family:Didot, serif; ">Propulsez votre marque et stimuler l'engagement .</p> <a href="#" type="button">Read More</a> </div> </div> </div> </div> <script src="index.js"></script> </body> </html> And Here is my CSS: body { display: flex; margin: 0; padding: 0; min-height: 100vh; background: #444; justify-content: center; align-items: center; font-family: arial; } .container { max-width: 700px; /* Adjust the maximum width as per your preference */ width: 100%; box-sizing: border-box; padding: 0 20px; display: flex; justify-content: center; /* Center the cards */ gap: 40px; /* Add some space between the cards */ } .container .card { flex: 1 1 calc(40% - 20px); /* Adjust the card width and keep some space between them */ margin-bottom: 20px; } .container .card .face { width: 100%; height: 200px; transition: 0.4s; } /* Responsive styles for smaller screens */ @media only screen and (max-width: 768px) { .container { padding: 0; } .container .card { width: 100%; margin-left: 0; } } .container .card .face.face1 { position: relative; background: #333; display: flex; justify-content: center; align-content: center; align-items: center; z-index: 1; transform: translateY(100px); transition: transform 0.8s ease-in-out; /* Ajout de la transition */ transform: translateY(100px); } I tried messing around with the margin instead of using 'gap' but nothing changes.