having problem with margins
i applied margin on the card then why is it effecting its parent element i dint understand can someone explain i think i forgot how margin works
<div class="container">
<div class="leftContainer">
<div class="cardFront">
<div class="cardDetails">
<img src="./images/card-logo.svg" alt="">
<p class="cardNumber">0000 0000 0000 0000</p>
<div class="cardName">
<p>JANE APPLESEED</p>
<p>00/00</p>
</div>
</div>
</div>
<div class="rightContainer"></div>
</div> <div class="container">
<div class="leftContainer">
<div class="cardFront">
<div class="cardDetails">
<img src="./images/card-logo.svg" alt="">
<p class="cardNumber">0000 0000 0000 0000</p>
<div class="cardName">
<p>JANE APPLESEED</p>
<p>00/00</p>
</div>
</div>
</div>
<div class="rightContainer"></div>
</div> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Space Grotesk', sans-serif;
}
.body{
font-size: 18px;
}
.container{
min-height: 100vh;
}
.leftContainer{
background-image: url('../images/bg-main-desktop.png');
min-height: 100vh;
width: 30%;
margin: 0;
}
.cardFront{
background-image: url("../images/bg-card-front.png");
min-height: 13rem;
border-radius: 0.4rem;
width: 25rem;
background-size: cover;
margin: 4rem;
}
.cardDetails img{
margin: 1.5rem;
}
.cardNumber{
margin-top: 1rem;
color: white;
font-size: 1.4rem;
text-align: center;
word-spacing: 0.6rem;
letter-spacing: 0.2rem;
}
.cardName{
display: flex;
justify-content: space-between;
font-size: 1rem;
align-items: center;
margin: 1rem 2rem;
color: white;
} @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Space Grotesk', sans-serif;
}
.body{
font-size: 18px;
}
.container{
min-height: 100vh;
}
.leftContainer{
background-image: url('../images/bg-main-desktop.png');
min-height: 100vh;
width: 30%;
margin: 0;
}
.cardFront{
background-image: url("../images/bg-card-front.png");
min-height: 13rem;
border-radius: 0.4rem;
width: 25rem;
background-size: cover;
margin: 4rem;
}
.cardDetails img{
margin: 1.5rem;
}
.cardNumber{
margin-top: 1rem;
color: white;
font-size: 1.4rem;
text-align: center;
word-spacing: 0.6rem;
letter-spacing: 0.2rem;
}
.cardName{
display: flex;
justify-content: space-between;
font-size: 1rem;
align-items: center;
margin: 1rem 2rem;
color: white;
}
