your textI am trying to make a wesbite as a practice. The basic target was to understand the flex property. I have designed two pages almost but when i try to use flex display in the third page, then the flex property is not reflecting. I have tried other property as well but it worked. THe mainly flex property is not working. Please help me to understand the reson of that problem. Or help me to reach at the solution

I tried different property it worked, but flex property not working. My target is to display the images in flex row direction.

<section id="food-menu">
        <h3 class="food-menu-heading">Food Menu</h3>
        <div class="food-menu-container container">
            <div class="food-menu-item">
                <div class="food-image">
                    <img src="/images/food-menu1.jpg" alt="">
                </div>
                <div class="food-description">
                    <h2 class="food-title">Food Menu Item 1</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam fugiat necessitatibus quaerat quas animi natus optio magnam illum quia aliquam?</p>
                    <div class="food-price">Price : ₹ Rs 250 </div>
                </div>
            </div>
        </div>

        <div class="food-menu-container container">
            <div class="food-menu-item">
                <div class="food-image">
                    <img src="/images/food-menu2.jpg" alt="">
                </div>
                <div class="food-description">
                    <h2 class="food-title">Food Menu Item 2</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam fugiat necessitatibus quaerat quas animi natus optio magnam illum quia aliquam?</p>
                    <div class="food-price">Price : ₹ Rs 250 </div>
                </div>
            </div>
        </div>
</section>

**CSS**
#food-menu{
    padding: 5rem 0 10rem 0;
}
.food-menu-heading{
    text-align: center;
    font-size: 3.6rem;
    color: #555;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 40px;
}
.food-menu-container{
    display:inline-flex;
    flex-wrap: wrap;
    padding: 50px 0 30px 0;
    
}
.food-menu-container img {
    display: block;
    height: 250px;
    border-radius: 50%;
    border: 5px solid red;
    object-fit: cover;
    object-position: center;

}