How can I make the height of an "outer" smaller in CSS? - html

Question

I'm making 2 cards in CSS and I want the 2nd one to lay below the 1st one. In order to locate the first card in the middle I created a "card-outer" div, but when I click "inspect element" I see that the height of the outer is more than 900px, and therefore, the 2nd card is +900px lower than the 1st card.
Do you guys have any idea of how can I fix this issue?
It looks like this, and I want only a 50px separation between both:
.card-outer {
display: flex;
justify-content: center;
min-height: 100vh;
}
.card {
width: 500px;
height: 250px;
display: flex;
overflow: hidden;
background: rgb(16, 33, 72);
box-shadow: 0 5px 10px #031e23;
border-radius: 30px;
color: white;
font-family: 'Dosis';
margin-top: 50px;
}
.card .img-card {
background: url(parque.png);
width: 40%;
height: 100%;
background-size: cover;
background-position: 60% 0%;
}
.card .content {
width: 60%;
height: 100%;
display: grid;
grid-template-rows: 50px 150px 50px;
padding: 10px 15px;
}
<div class="card-outer">
<div class="card">
<div class="img-card"></div>
<div class="content">
<div class="titulo">
<h3>Parque Metropolitano</h3>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi consectetur, accusamus repellat architecto veritatis quis vel harum molestiae tempore ea illo ut sapiente magnam voluptate.
</p>
</div>
<div class="btn-container">
<button>Sitio web</button>
</div>
</div>
</div>
</div>

Answer 1

Assuming the .card-outer is the wrapper for the layout, use the gap property on your .card-outer to make your 50px separate and use justify and align to get the cards where you want them within the wrapper.
If .card-outer isn't a wrapper, create one using the same technique.
.card-outer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
gap: 50px; /*this guy right here */
}
.card {
width: 500px;
height: 250px;
display: flex;
overflow: hidden;
background: rgb(16, 33, 72);
box-shadow: 0 5px 10px #031e23;
border-radius: 30px;
color: white;
font-family: 'Dosis';
margin-top: 50px;
}
.card .img-card {
background: url(parque.png);
width: 40%;
height: 100%;
background-size: cover;
background-position: 60% 0%;
}
.card .content {
width: 60%;
height: 100%;
display: grid;
grid-template-rows: 50px 150px 50px;
padding: 10px 15px;
}
<div class="card-outer">
<div class="card">
<div class="img-card"></div>
<div class="content">
<div class="titulo">
<h3>Parque Metropolitano</h3>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi consectetur, accusamus repellat architecto veritatis quis vel harum molestiae tempore ea illo ut sapiente magnam voluptate.
</p>
</div>
<div class="btn-container">
<button>Sitio web</button>
</div>
</div>
</div>
<div class="card">
<div class="img-card"></div>
<div class="content">
<div class="titulo">
<h3>Parque Metropolitano</h3>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi consectetur, accusamus repellat architecto veritatis quis vel harum molestiae tempore ea illo ut sapiente magnam voluptate.
</p>
</div>
<div class="btn-container">
<button>Sitio web</button>
</div>
</div>
</div>
</div>