The Image photo for the containerI 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 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<section id="Card-main">
<div class="card-container">
<div class="top-container">
<img src="images/illustration-hero.svg" class="main-image">
</div>
<div class="middle-container">
<h1 class="title">
Order Summary
</h1>
<br>
<p class="summary">
You can now listen to millions of songs ,audiobooks and podcasts on any device anywhere you like
</p>
<div class="plan-container">
</div>
</div>
<div class="bottom-container">
<button class="btn" type="button">
Proceed to Payment
</button>
<button class="btn-cancel">
Cancel Order
</button>
</div>
</div>
</section>
</body>
</html>
CSS
@import url(https://fonts.google.com/specimen/Red+Hat+Display);
:root{
--Pale-blue: hsl(225, 100%, 94%);
--Bright-blue: hsl(245, 75%, 52%);
--Very-pale-blue: hsl(225, 100%, 98%);
--Desaturated-blue: hsl(224, 23%, 55%);
--Dark-blue: hsl(223, 47%, 23%);
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
/* Body Backgrounds */
body{
background-image:url(/images/pattern-background-desktop.svg);
background-repeat:no-repeat;
background-color:hsl(225, 100%, 94%) ;
font-family: "Red Hat Display", sans-serif;
}
/* Card Container */
.card-container{
width:33%;
height:80%;
margin: 3em auto;
background-color:hsl(225, 100%, 98%) ;
border-radius: 10%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.main-image{
width: 100%;;
}
.top-container{
margin:0 0 2em 0;
}
h1.title{
font-weight: 900;
}
p{
font-size:16px;
line-height: 2em;
margin:2em auto;
color:var(--Desaturated-blue);
}
.bottom-container{
width:90%;
}
.btn{
background-color: var(--Bright-blue);
color: var(--Pale-blue);
padding:0.75rem 6rem;
border-radius: 5%;
font-size: 16px;
border:none;
font-weight: 700;
cursor:pointer;
border-radius:12px;
margin:0 auto;
}
.btn:hover{
background-color: var(--Pale-blue);
color: var(--Bright-blue);
}
.btn-cancel{
background-color: white;
color:var(--Desaturated-blue);
border:none;
cursor:pointer;
font-weight: 700;
font-size:0.9rem;
margin:2em auto;
}
.btn-cancel:hover{
color: black;
}