John Doe John Doe - 4 months ago 5
CSS Question

How to get rid of a white space that develops when the browser size is reduced?

http://stackoverflowproblems.site88.net/index.html

Above is the current site. In terms of layout, there are no problems. But, when you minimize it to phone screen size (in your browser), a white space develops in between the two white spaces. What could be the problem? This white space is still part of that Div as I saw when I inspected it, but the content is not filling into that white part. See for yourself in the website above. ^ Also, on other resolutions the layout may look weird. If so, I would appreciate a solution for that too. Thanks!

Answer

The margin-top: 20px created the space between the "2 black divs", which is what I think you meant by the "two white spaces" in your question. Setting it to `margin-top: 0", or

h1.first-of-type {
    margin-top: 0;
}

will solve your problem