I am not able to cut excess white spaces between two divs

CSS

<style>
        #about_restaurant{
            background-color:yellow;
            width:100%;
            height:240px;
            padding-top:0;
            display:flex;
            align-items:center;
        }
        .delivery_image{
            flex: 0 0 auto;
            padding: 1em;
        }
        .delivery_image img{
            display:block;
            border-radius:50%;
        }
        .describe_restaurant{
            float:left;
        }
        .describe_restaurant h2{
            flex: 1 1 auto;
            padding: 1em;
        }
        .title{
            text-align:center;
            background-color:aqua;
            padding-bottom:0;
        }
</style>

HTML

<div class="container-fluid">
    <div id="About">
        <h2 class="title">About Restaurant</h2>
        <div id="about_restaurant">
            <div class="delivery_image">
                <img src="delivery.jpg" width="250" height="250">
            </div>
            <div class="describe_restaurant">
                <h2>Our restaurant aimed to provide delivery service to the customers. We hope the service and the
                    quality of food could satisfy the customers' expectations. Welcome to support our delivery service.
                </h2>
            </div>
                
            
        </div>
    </div>
</div>

I have a problem that although I used padding-bottom:0; in style for the class .title but there are still white spaces between .title and #about_restaurant. May I ask if I want to cut the excess white spaces between two elements what is the best way to solve it?