How can one fix a CSS3 graident background when using a box for content?

I'm designing my first page using CSS3, and I'm running into a snag. I used this question and answer to create a neat looking background for the body of my site. This worked fine until I added a content class. This caused the CSS gradient to not quite reach the end of the page (scroll down to see the effect). Here is my CSS:

html{
    height: 100%
}

body {
    background: #c5deea; /* old browsers */

    background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endCo开发者_Python百科lorstr='#066dab',GradientType=0 ); /* ie */

    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
}

#content{
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;

    background: white;
    margin-left: auto;
    margin-right: auto;
    padding: .5%;
    margin-top: 2%;
    margin-bottom: 2%;
    width: 50%;
}

h1, h2, h3 {
    color: #066dab;
}   

Can anyone tell me what has gone wrong, and how to fix it? I should note that I am very new to CSS, let alone CSS3; so, any insights are appreciated

Do it like this instead:

Live Demo

• I neatened the way you were setting height: 100%.
• I took the margin off #content.
• To compensate for the lost margin, I added an extra wrapper element and gave it padding: 2%.