There seems to be an issue with the spacing between the elements .title and #about_restaurant, even after applying padding-bottom:0; to the .title class. How can I reduce the excess white spaces between these two elements?
#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;
}<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>