How to move all my content in the middle using FLEXBOX-CodePudding

I have been trying to put the display flex property in my card-container class , and use the justify-content property to center it , but it is not making any change to the content inside the box , can anyone tell me what am I doing wrong , I was just practicing something from frontendio, plus there was also this problem with my first button , the one to place order , even though I had set the padding to 0.75 rem on both top and bottom and 4rem on left and right it was still uneven on left and right

HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Order summary card</title>
  <link rel="stylesheet" href="styles.css">

  <!-- Feel free to remove these styles or customise in your own stylesheet