Las tarjetas se posicionan una abajo de la otra, pero quiero que se pongan una al lado de la otra. Probe con Space-Between, con Space-Evenly, con Justify-Content: Center; pero no lo soluciona. Seguramente el problema está en otra parte del codigo y eso es lo que no encuentro.
Como este bloque hay dos mas pero con poner esto ya se entiende:
.caja {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
flex-wrap: wrap;
padding: 40px 0;
background: #eef6fc;
font-family: "Poppins", sans-serif;
}
.caja .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px -5px rgba(255, 255, 255, 0.5), inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px -5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.caja .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #eef6fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
<div class="caja">
<div class="card">
<div class="box">
<div class="content">
<h2>01</h2>
<h3>Card One</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas, modi!</p>
<a href="#">Ver más</a>
</div>
</div>
</div>
</div>