Как выровнять эти изображения горизонтально, и если я добавлю другое изображение, он будет добавлен Horizontaly ⇐ Html

[Anonymous]

Я пытаюсь создать ползунок изображений с именем и описанием, но когда я добавляю другое изображение, он добавил вертикально, я попытался изменить дисплей, но ничего не произойдет, вы не можете помочь мне с этим я только новым в CSS и HTML
Я хочу создать этот вид слайдера изображения
введите описание изображения здесь
, но вместо этого происходит
Введите описание изображения здесь < /p>
Что у меня сейчас: < /p>


.services {
position: relative;
overflow: hidden;
padding: 20px;
}

.services-container {
padding: 0 10vw;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
}

.services-container::-webkit-scrollbar {
display: none;
}

.service-card {
flex: auto;
display: inline-block;
width: 300px;
height: 450px;
text-align: center;
margin-right: 40px;
}

.service-image {
position: relative;
overflow: hidden;
height: 350px;
width: 100%;
}

.service-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}< /code>












Anti Acne
Description





Anti Aging
Description





< /code>
< /div>
< /div>
< /p>
Я пробовал другой дисплей, но ничего не происходит, оно просто разбудит изображение и это не соответствует контейнеру

Подробнее здесь: https://stackoverflow.com/questions/763 ... ill-be-add