Как разместить несколько блоков рядом по горизонтали css?

Question

[Manvel]

У меня есть несколько блоков, которых я хотел бы разместить рядом друг друга по горизонтали.
Есть css ли свойства для этого?

HTML

<div class="container">
    <div class="product__item1">
        <img class="product__img" src="images/Shoe.png" alt="">
       <h2 class="product__title">Branded Shoe</h2>
       <div class="product__balance">$300</div>
       <a href="#" class="products__btn">Buy now</a>
       </div>  
       <div class="product__item1">
        <img class="product__img" src="images/Shoe.png" alt="">
       <h2 class="product__title">Branded Shoe</h2>
       <div class="product__balance">$300</div>
       <a href="#" class="products__btn">Buy now</a>
       </div>  
       <div class="product__item1">
        <img class="product__img" src="images/Shoe.png" alt="">
       <h2 class="product__title">Branded Shoe</h2>
       <div class="product__balance">$300</div>
       <a href="#" class="products__btn">Buy now</a>
       </div>  
    </div>

CSS

.container{
    width: 100%;
    max-width: 1024px;
    margin:0 auto;
    padding:0px 128px;
}
.product__item1{
    width: 24%;
    padding: 51px 0px;
    flex-wrap: wrap;
}
.product__title{
    font-family: 'Bebas Neue', cursive;
    margin: 0px 0px;
    text-align: center;
    font-size: 27px;
}
.product__balance{
    font-family: 'Bebas Neue', cursive;
    font-size: 27px;
    margin: 0px 43px;
}
.products__btn{
    font-family: 'Bebas Neue', cursive;
    text-decoration: none;
    color: #fff;
    background-color: #4ccfc1;
    border: 3px solid #4ccfc1;
    padding: 1px 7px;
    position: relative;
    bottom: 32px;
    left: 100px;
    font-size: 20px;
    border-radius: 4px;
    transition: 300ms
}
.products__btn:hover{
    background-color: #fff;
    color: #4ccfc1;
}

Answer 1

[Иван]

Добавь контейнеру:
display: flex;

И ровнях их, как тебе нужно с помощью justify-content;

Например так:

.container{
    width: 100%;
    max-width: 1024px;
    margin:0 auto;
    padding:0px 128px;
    display: flex;
    justify-content: space-between; 
}

Answer 2

[Олег]

display: inline-block;