why is this div shrinking ?
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* .parent{
background-color: #23424A;
padding: 50px;
width: 80%;
margin: 0 auto;
}
.child{
background-color: cyan;
height: 300px;
width: 750px;
} */
.container{
background-color: #23424A;
padding: .5rem;
color: yellow;
border: solid 2px black;
}
.card {
border-radius: 10px;
background-color: black;
padding: .5rem;
color: white;
width: 450px;
margin: 4rem 0rem;
}
.card > img {
border-radius: 10px;
display: block;
width: 100%;
object-fit: cover;
}
.card > p{
color: #7f7b7b;
margin: .6rem 0;
}
.card > h2 {
margin-top: 10px;
}
.card > button {
background-color: orangered;
border: none;
color: white;
padding: .5rem 0;
border-radius: 10px;
font-weight: bold;
}*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* .parent{
background-color: #23424A;
padding: 50px;
width: 80%;
margin: 0 auto;
}
.child{
background-color: cyan;
height: 300px;
width: 750px;
} */
.container{
background-color: #23424A;
padding: .5rem;
color: yellow;
border: solid 2px black;
}
.card {
border-radius: 10px;
background-color: black;
padding: .5rem;
color: white;
width: 450px;
margin: 4rem 0rem;
}
.card > img {
border-radius: 10px;
display: block;
width: 100%;
object-fit: cover;
}
.card > p{
color: #7f7b7b;
margin: .6rem 0;
}
.card > h2 {
margin-top: 10px;
}
.card > button {
background-color: orangered;
border: none;
color: white;
padding: .5rem 0;
border-radius: 10px;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatem qui magnam. Adipisci voluptas totam
veniam iusto voluptatum. Similique commodi officia ratione rerum, repudiandae, inventore, eum accusamus vero
impedit qui necessitatibus fuga minus tenetur? Eum ipsam deleniti tempore ut placeat ducimus neque, dolor,
pariatur, doloremque ipsa corporis. Exercitationem, nemo distinctio!
</div>
<div class="card">
<img src="./luffy.jpg" alt="">
<h2>Anime Guess Quest</h2>
<p>Shown a series of anime character, pick the correct name of each character</p>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatem qui magnam. Adipisci voluptas totam
veniam iusto voluptatum. Similique commodi officia ratione rerum, repudiandae, inventore, eum accusamus vero
impedit qui necessitatibus fuga minus tenetur? Eum ipsam deleniti tempore ut placeat ducimus neque, dolor,
pariatur, doloremque ipsa corporis. Exercitationem, nemo distinctio!
</div>
<div class="card">
<img src="./luffy.jpg" alt="">
<h2>Anime Guess Quest</h2>
<p>Shown a series of anime character, pick the correct name of each character</p>
</div>
</body>
</html>
