On the html page there are large of white spaces and I am not able to cut them

CSS

        #main_page{
            padding-top:80px;
            padding-left:0px;
        }
        .cuisines_about{
            padding-left:0px;
            display:flex;
            width:100%;
            height:750px;
            background-color:green;
            float:left;
        }
        .cuisines_description{
            flex:0 0 auto;
            width:100%;
            justify-content:flex-start;
        }
        .cuisines_description h2{
            text-align:center;
            padding-top:300px;
            font-size:80px;
        }
        .cuisines_images{
            flex:1 1 auto;
            width:100%;
            height:500px;
            display:flex;
        }
        .cuisines_16pic{
            flex:0 0 auto;
        }
        .cuisines_9pic{
            flex:1 1 auto;
        }

HTML

        <div id="main_page">
            <div class="cuisines_about">
                <div class="cuisines_description">
                    <h2>Enjoy different cuisines <br> around the world!</h2>
                </div>
                <div class="cuisines_images">
                    <img class="cuisines_16pic" src="different_cuisines.png" width="700" height="750">
                    <img class="cuisines_9pic" src="different_cuisines02.png" width="550" height="750">
                </div>
            </div>
            
            
        </div>

For this code although I used padding-left:0; in both #main_page and .cuisines_about two sections there are still large white spaces so may I ask any possible ways to cut them out in order to have the contents in .cuisines_description to be placed on the leftmost?