Merhaba öncelikle konuyu umarım doğru kategoride açıyorumdur, websitemde bu kutuları yan yana sıralamak için şu kodu kullandım ve bir çok şey denedim fakat aşağıdaki resimde olduğu gibi hep alt alta ve bitişik şekilde çalışıyor bunları yan yana yapmak istiyorum lütfen yardımcı olur musunuz

body{
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(#00377B, #dbdddd);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border-top-width: 0;
}
.card-wrap{
  width: 220px;
  background: #fff;
  border-radius: 20px;
  border: 5px solid #fff;
  overflow: hidden;
  color: var(--color-text);
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
              rgba(0, 0, 0, 0.23) 0px 6px 6px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  gap: 10px;
}