Im having some trouble with one of div elements. the background is taking up more or less the full screen

Question

Im doing a side project to practice my HTML and CSS and have the layout of the page pretty much set. Its kind of like a questionaire of characters and after all answers are submited i want a paragraph to show at the bottom of the screen with the result.(similar to the MASH game in digital literacy). however when I type the results paragraph and give it a background, the background seems to cover all the page apart from the header element. Ive tried problem solving for around an hour but can't for the life of me figure out where i have gone wrong. my HTML code is:

please note I do have a responsive.css linked to this HTML however the problem still happens at all screen resolutions

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="normalize.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
    <link href="Charstyle.css" rel="stylesheet">
    <link href="responsive.css" rel="stylesheet">
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">

    <title>Sitcom Character Quiz</title>
</head>
<body>
    <header>
        <h1>Test Your Knowledge!</h1>
        <h2>See how many characters from the popular sitcoms you can name.</h2>
     </header>
    <form action="" method="post" id="mash">
    <div class="wrapper">
    <section>
    <ul>
        <li><img src="img/Amy.jpg" alt="amy">
            <input type="text" name="amy">
        </li>
        <li><img src="img/ted.jpg" alt="ted">
            <input type="text" name="ted">
        </li>
        <li><img src="img/barney.png" alt="barney">
            <input type="text" name="barney">
        </li>
        <li><img src="img/chandler.jpg" alt="chandler">
            <input type="text" name="chandler">
        </li>
        <li><img src="img/howard.jpg" alt="howard">
            <input type="text" name="howard">
        </li>
        <li><img src="img/joey.jpg" alt="joey">
            <input type="text" name="joey">
        </li>
        <li><img src="img/lenard.jpg" alt="lenard">
            <input type="text" name="lenard">
        </li>
        <li><img src="img/raj.jpg" alt="raj">
            <input type="text" name="raj">
        </li>
        <li><img src="img/lily.jpg" alt="lily">
            <input type="text" name="lily">
        </li>
        <li><img src="img/bernadette.jpg" alt="bernadette">
            <input type="text" name="bernadette">
        </li>
        <li><img src="img/marshal.jpg" alt="marshal">
            <input type="text" name="marshal">
        </li>
        <li><img src="img/Barry.png" alt="barry">
            <input type="text" name="barry">
        </li>
        <li><img src="img/monica.png" alt="monica">
            <input type="text" name="monica">
        </li>
        <li><img src="img/penny.jpg" alt="penny">
            <input type="text" name="penny">
        </li>
        <li><img src="img/rachel.jpg" alt="rachel">
            <input type="text" name="rachel">
        </li>

        <li><img src="img/robin.jpg" alt="robin">
            <input type="text" name="robin">
        </li>
        <li><img src="img/ross.jpg" alt="ross">
            <input type="text" name="ross">
        </li>
        <li><img src="img/sheldon.jpg" alt="sheldon">
            <input type="text" name="sheldon">
        </li>

        </ul>
    </section>
    </div>
        <div id="answer" class="hide" class="show">
            <p>You scored <span id="numresult"></span>out of 18!</p>
        </div>
    <input id="submitanswer" type="button" value="SUBMIT">
    </form>
    </body>

</html>

and my css code is

/*******************************************
GENERAL STYLING
*******************************************/

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;


}

header {
    background-color: firebrick;
    color: #fff;
    text-align: center;
    width: 100%;

}

h1 {
    margin: 0 10px;
    padding-top: 20px;
    padding-bottom: 10px;
    font-size: 2.5em;
    font-weight: bold;
    line-height: .80em;
    font-family: "Permanent Marker", cursive;
    max-width: 100%
}

h2 {
    font-size: 1em;
    padding-top: -10px;
    background-color: #8d1919;

}

img {
    max-width: 100%;
    width: 100%;
    height: 250px;
}


body {
    margin: 0 auto 0;
    padding: 0;
    background-color: #ddd;
}

/*******************************************
QUIZ UNITS
*******************************************/

ul {
    list-style: none;

}

li {
    padding: 0;
    margin: 2.5%;
    width: 90%;
    display:block;
    float: left;

}
li input {

    margin-top: 0;
    width: 100%;
}

#submitanswer {
    background-color: firebrick;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 25% 30px auto;
    width: 50%;
    padding: 0;
    border-color: 10px solid #651515;
    max-width: 100%;

}

#answer p {

    background-color: firebrick;
    color: white;
    text-align: center;
}

Welcome to the Treehouse Community

Looking to learn something new?

sean jones

sean jones

Im having some trouble with one of div elements. the background is taking up more or less the full screen

Edgar Gil

Edgar Gil