Why am I getting this white space between my section and my footer?

I've experimented with margins and padding to no avail. Understand the box model. What is going on here?

header {
    background-color: #C05746;
    padding-top: 10px;
    padding-bottom: 25px;
    border-bottom: black solid 3px;
    color: gainsboro;
}

h1,
h2,
h3 {
    text-align: center;
}

section {
    padding-top: 1px;
    background-color: #ADC698;
    border-bottom: black solid 3px;
    color: black;
    height: 400px;
}


form {
    padding-top: 50px;
}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#form-button {
    margin-top: 10px;
}

footer {
    background-color: #493B2A;
    height: 213px;
}

footer p {
    text-align: left;
    color: ghostwhite;
    padding-top: 30px;
    font-size: 1.1em;
    padding-bottom: 3px;
}

Open in new window


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Enter the number of numbers you need to determine the Greatest Common Factor and Least Common Denominator for</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
  <script>

      function generateHTML(number) {
      var master_markup = '<h3>Enter ' + number + ' numbers to find the Greatest Common Factor';
          master_markup += ' and Least Common Denominator.<br><br>';
      var html1 = '<input name="number[]';
      var html2 = '" type="text" size="3" id="number[]';
      var html3 = '">';
      var hidden_input = '<input type="hidden" name="quantity" value="' + number + '">';
      var submit_button = '<input type="submit" value="submit">';
      var i = 1;
      while (i <= number) {
          master_markup += html1 + html2 + html3;
          if (i == number) {
          master_markup += hidden_input;
              master_markup += submit_button;
          }
          i++;
      }
      return master_markup;
      }

    function getNumber() {
      var number = document.getElementById('number');
        var number_value = number.value;
        return number_value;
    }

    function master(){
        var number = getNumber();
        if (Number(number) === parseInt(number)) {
          if (2 > number) {
            alert('The number must be two (2) or higher.');
          }
          else if (number > 10) {
            alert('The number must be less than eleven (11).');
          }
          else {
            var html = generateHTML(number);
              document.getElementById('form-inputs-and-submit').innerHTML = html;
          }
      } else {
            alert('You must enter a whole number/integer.');
        }
    }
  </script>
</head>
<body>
  <header>
    <h1>This website computes the Greatest Common Factor (GCF) and Least Common Denominator (LCD) for a group of numbers.</h1>
  </header>
  <section>
    <h2>It needs to know how many numbers you want to find the GCF and LCD for.</h2>
    <h3>Please enter a number between two (2) and ten (10) to move forward.</h3><h3>They must be whole numbers.</h3>
    <form name="theform" action="process.php" method="post" id="theform">
    <div id="form-inputs-and-submit">
      <input name="number" type="text" class="center" size="2" id="number">
      <button type="button" id="form-button" class="center" onclick="master()">Click to Generate Form</button>
    </div>
    </form>
  </section>
  <footer>
    <p>
      Thank you for using this website.<br> It uses HTML5, CSS3, JavaScript and PHP.<br> Everything except PHP is interpreted by the browser,
      which is on your computer.<br> PHP is interpreted by the server, which is the computer your computer is connected to when you view
      this site.<br> PHP is suited to certain tasks for 2 reasons. <br>First of all it runs on the server and users can't
      prevent its execution by disabling it in their browser like JavaScript. <br>Second it can work with databases and create sessions
      which makes HTML stateless no more.<br><br>
    </p>
</body>
</html>

Open in new window

Screen-Shot.png
burnedfacelessAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

gr8gonzoConsultantCommented:
At first glance, my guess is that the padding-5op on your <p> tag inside your <footer> is creating the whitespace.

Incidentally, if you weren't aware of them already, the Developer Tools that come with most major browsers nowadays tends to be pretty good at helping you visualize what CSS is doing and often lets you play with / edit the CSS in real-time to validating your theories. In Chrome, for example, hit F12 to pop open the developer tools, and then right-click on your white space on your page and choose Inspect.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
burnedfacelessAuthor Commented:
I removed both paddings and it had no effect.

When I used Chrome developer tools I could not select the white space as an individual element it just kept showing up as body, so my first CSS declaration now sets the body background color to the footer's color.

Thanks, those dev tools are pretty cool.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML 5

From novice to tech pro — start learning today.