Big blank space at the bottom of page

April 28, 2022

So, I’m having this problem, when I added a background image to a flexbox column, I can see that there is a big blank space at the bottom at the bottom, I tried to inspect the page but could not find the problem. I have no idea what to do nor how to fix the problem, what I want to do is remove the blank space or make the picture go down all the way. Any help is greatly appreciated.

body {
    background-color: rgb(245, 245, 245);
    font-family: 'Roboto', sans-serif;
    padding: 0;
    margin: 0;
    overflow: auto;
}
.main {
    display: flex;
    justify-content: space-evenly;
}
.row {
    flex: 50%;
    padding: 3em;
    padding-left: 15em;
}
.row1 {
    flex: 50%;
}
.row-text-top {
    padding-bottom: 1em;
    font-size: 21px;
}
.row-text-mid {
    padding-bottom: 3em;
    font-size: 16px;
}
.row-text-mid1 {
    font-size: 25px;
    border-left: 5px solid #ff9b7c;
    padding: 0.5em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
    padding-top: 3em;
}
.row1 {
    background-image: url(earth.jpg);
    background-size: cover;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>City</title>
        <link href="wwd.css" rel="stylesheet" type="text/css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="index.js"></script>
    </head>
    <body>
        <div class="main">
            <div class="row">
                <h1>Overview</h1>
                <div class="row-text-top">
                    One of the most urgent issues of our time, climate change has widespread                     implications — from the exacerbation of 
                    poverty, to the breakdown of infrastructure, to the loss of                                 environmental, political, economic and social security. 
                    Experts agree that climate change threatens to set back development                         efforts by decades, placing least developed countries 
                    and already-vulnerable populations in an even more precarious position.
                </div>
                <div class="row-text-mid">
                    The latest Intergovernmental Panel on Climate Change (IPCC) Fifth                           Assessment Report (AR5), signed 
                    off by almost 200 nations, concludes with 95% certainty or more that                         humans have caused the majority 
                    of climate change since the 1950s. It predicts global surface                               temperature to continue to rise, along 
                    with increased sea level rise, melting of glaciers and ice sheets,                           acidification of oceans, increase 
                    in the intensity of tropical storms and changes in precipitation                             patterns.
                </div>
                <div class="row-text-mid1">
                    In other words; the science on climate change is clearer than ever, and                     so is the urgency for human action.
                </div>
                <div class="row-text-low">
                    As a global community, we all have a role in developing and implementing                     solutions toward significant 
                    transformation in our development patterns. It requires not only a shift                     in awareness and accountability 
                    for our own individual choices but in a social, political and economic                       shift towards enabling conditions 
                    for these sustainable choices to be made– and in turn, a more just,                         equal and healthy planet.
                </div>
            </div>
            <div class="row1">
            </div>
        </div>
    </body>
</html>

I’ts a bit hard to see because of the image not being there but I will add a picture aswell:

>Solution :

The issue is here:

.row {
  flex: 50%;
  padding: 3em;         <---- This line
  padding-left: 15em;
}

You’re adding additional padding all around the row element, including the bottom. After removing this padding, the space at the bottom of the screen is gone.

Here’s a working demo: https://codepen.io/Lissy93/pen/yLvBJLe

Tip: I recommend using the developer tools, with the element selector you can hover over the space, and it will show exactly which element is causing it, and show whether it is (green for) padding and (orange for) margin.