Good news, I seem to have fixed the code. I cleaned up the code for #colophon. I changed it from this:
#colophon {
background:url(http://kjel.ca/wp-content/uploads/2014/12/footer-img.jpeg) repeat-x bottom center;
height:80%;
width:100%;
position:absolute;
margin:0;
padding:0;
bottom:0;
min-width:100%;
min-height:1%;
}
To this:
#colophon {
background: url("http://kjel.ca/wp-content/uploads/2014/12/footer-img-2.jpeg") repeat-x scroll center bottom transparent;
height: 100%;
position: absolute;
width: 100%;
background-size: 100% 448px;
}
The value that seems to have been the source of the problem was bottom: 0; That put the footer below the content, but there was a right margin. To fix that I added this:
footer[role="contentinfo"] {
line-height: 2;
max-width: 100%;
margin-top: 0;
padding: 0px 0px;
}
Thanks for your help guys.