I've encountered a problem while working on my website. The inner div #content wasn't expanding to the full size of the page, causing the text to overflow messily over the background image and making it difficult to read. I initially used overflow: auto; to resolve this issue, but now an unwanted scrollbar has appeared on the page. Below are the CSS sections that control the body, html, and #content elements (#content is a div).
body, html {
height: 100%;
font-family: Helvetica, Arial, sans-serif;
}
body {
background-color: black;
color: white;
background: url('c12background.jpg');
}
#content {
height: 100%;
width: 80%;
margin: auto;
padding: 5px 5px 5px 5px;
background-color: black;
overflow: auto;
}