Hey guys, im new to the coding area and i got a problem with my html or css code. but i guess its part of the css due to i havent found really good informations about that and used parts of others which seemed to fit.

here is my (short) html text. following my css text. please help me some. i did it in scriptly and the "preview-mode" had shown it corretly, after hosting it it dont =(

HTML Code:
<!DOCTYPE html>
<html>

<head>

    <title>Startseite - www.newspn2.com/</title>

    <meta charset="UTF-8" />
    <meta name="description" content="Startseite">


    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
    <img src="pics/cave.jpg" class="bg">
    <div id="page-wrap">
    <img src="pics/banner.jpg" class="banner" alt=""/>
    <div id="navi">
        <ul>
            <li> <a href="index.htm">Home</a></li>
            <li> <a href="generell-help.htm">Generell Help</a></li>
            <li> <a href="updates.htm">Updates</a></li>
            <li> <a href="videos.htm">Videos</a> </li>
        </ul>
    </div>

    <div id="inhalt">
        <h1>Pockie Ninja 2 Social!</h1>
        <p>Hello and welcome to my webside for Pockie Ninja 2 Social</p>
        <p>I will show you here the newest updates and some videos of crazy
            guys and later on maybe some array helps</p>
    </div>

    </div>
    </div>
</body>
</html>
Code:
h1 {
    color:red;
    background-color: #000000;
}

#navi {
    float:left;
    width: 11em;
    background-color: #808000;
}

#inhalt {
    color:red;
    margin-left: 14em;
}

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


img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;

			/* Set up proportionate scaling */
			width: 100%;
			height: auto;

			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}

		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}

		#page-wrap { position: relative; /*width: 800px; */ margin: 40px auto; padding: 0px;
         -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
		p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0;  }
especially the page wrap is ""stolen""