Question

I’ve made a site using with a CSS made from scratch.

The Page The CSS

Randomly there are unwanted white spaces in two places:

• Above the main content area (below
  the menu bar).
• Below the main content area and
  sidebar and above the footer.

I’ve experimented with various methods of fixed the problem like margins and paddings but they didn’t seem to work.

What could I do to get rid of these white areas?

Answer 1

The extra white space comes from the browser’s default stylesheet. Add these rules:

h2 {
    margin: 0;
}

h4 {
    margin: 0;
}

To solve this problem, and prevent future ones, I recommend using a CSS reset. Eric Meyer’s is a widely recommended one; another good option is the YUI CSS Reset.