Salve ragazzi

Ho un problema con la disposizione dei div di questo sito: http://testarea.freehostingcloud.com/

Questo è il mio CSS:

codice:
root { 
    display: block;
}

body{
    margin: 0 0 0 0;
    background-image:url("../Immagini/sfondo2.png");
    font-family:Arial;
}

#wrapper{
    margin-right: auto;
    margin-left:auto;
    margin-top:0px;
    height: 100%;
    width: 792px;
    background-color:red;
}

#header{
    height: 234px;
    width: 792px;
    background-image:url("../Immagini/logo.png");
}

#menu
{
    height: 20px;
    width:792px;
    margin-bottom: 10px;
}

#slideshow{
    height: 200px;
    width: 792px;
    margin-top:0px;
}

#content{
    padding-top:5px;
    height: auto;
    width: 792px;
    margin-top:0px;

}

h1{
    color: #9a6219;
    font-family: Arial;
}

#footer
{
    height: 50px;
    width: 792px;
    background-color:blue;

}

li{
    list-style-type: none;
    float:left;
    margin-right:20px;
    vertical-align:middle;
    color: #9a6219;
}

#contacts{
    text-align:right;
    float:right;
    margin-right: 5px;
}

ul{
    padding-left:0px;
}

a{
    text-decoration:none;
    font-family: Arial;
    color: #9a6219;
}

a:hover{
    color:#461c00;
}


/* Css SLIDESHOW */

img.slide{
	display:none;
	border:0;
	height:200px;
	width:792px;
	top:0;
	left:0;
	margin:0px auto;
}

/* Form contatti */

/* form 3 */

	#form3{
		margin:1em 0;
                margin-top:0px;
/*		background:url(../Immagini/formcontatti/form_bg.jpg) no-repeat 0 0;*/
		width:542px;
		height:364px; /* fixed size (envelope graphic) */
		overflow:hidden;
		}
	#form3 h3{display:none;}
	#form3 fieldset{
		margin:0;
		padding:0;
		border:none;
		float:left;
		display:inline;
		width:200px;
		margin-left:34px;
		padding-top:80px;
		}
	#form3 fieldset.last{
		width:254px;
		margin-left:17px;
		}
	#form3 legend{display:none;}
	#form3 p{margin:.5em 0;}
	#form3 label{display:block;}
	#form3 input, #form3 textarea{
		width:192px;
		border:1px solid #ddd;
/*		background:#fff url(../Immagini/formcontatti/form_input.gif) repeat-x;*/
		padding:3px;
		}
	#form3 textarea{
		width:246px;
		height:200px;
		overflow:auto;
		}
	#form3 p.submit{
		margin:0 34px;
		clear:both;
		position:relative;
		}
	#form3 button{
		padding:0;
		position:absolute;
		left:0;
		top:-3.5em;
		width:95px;
		height:36px;
		text-indent:-8000px;
		overflow:hidden;
		border:none;
		background:url(../Immagini/formcontatti/form_button.gif) no-repeat 0 0;
		color:#fff;
		cursor:pointer;
		}

/* // form 3 */
E questa la index:

codice:
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" href="css/style.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

        <script type="text/javascript" src="js/slideS.js"></script>

        <script src="galleria/galleria-1.2.7.min.js"></script>
        <link type="text/css" rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
        <script type="text/javascript" src="galleria/themes/classic/galleria.classic.min.js"></script>

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

        <script src="js/jquery.adipoli.min.js" type="text/javascript"></script>

        <title>Equus</title>
    </head>
    <body>
        <div id="contacts">

            [img]Immagini/fb.png[/img][img]Immagini/skype.png[/img][img]Immagini/mail.png[/img]
            <script>
                //                $('#fb').adipoli({
                //                    'startEffect' : 'normal',
                //                    'hoverEffect' : 'popout',
                //                    'popOutShadow': 0
                //                });
            </script>
        </div>
        <div id="wrapper">

            <div id="header">
            </div>
            <div id="menu">
                <ul>[*]HOME[*][img]Immagini/cavallo.png[/img][*]I CAVALLI[*][img]Immagini/cavallo.png[/img][*]GUESTBOOK[*][img]Immagini/cavallo.png[/img][*]GALLERIA[*][img]Immagini/cavallo.png[/img][*]CHI SIAMO[*][img]Immagini/cavallo.png[/img][*]CONTATTI[/list]
            </div>
            <div style="text-align:center;margin-bottom:5px">[img]Immagini/linea.png[/img]</div>
            <div id="slideshow">
                <?php foreach (glob("gallery/*.jpg") as $filename) {
                ?>
                    [img]gallery/<?php echo basename($filename); ?>[/img]
                <?php
                }
                ?>
            </div>
            <div style="text-align:center;margin-top:5px;margin-bottom:5px">[img]Immagini/linea.png[/img]</div>
            <div id="content">

                <?php
                if (isset($_GET['page'])) {

                    $page = $_GET['page'];

                    if (file_exists('' . $page . '.php')) {
                        include('' . $page . '.php');
                    } else {
                        echo "Quello che stavi cercando non si trova qui!";
                    }
                }
                ?>

            </div>
            <div id="footer">

            </div>
        </div>
    </body>
</html>
Come si vede, ho evidenziato il mio div contenitore (Wrapper) in rosso.
La mia pagina prevede quel contenitore centrale con all'interno tutti gli altri. Il problema è che il div content rispetta lo stile del wrapper, rimanendo al centro, ma sembra "esterno" a quest'ultimo (si noti anche il footer fuori dal wrapper, evidenziato in blu).
Cosa potrebbe essere?

Nella pagina "Galleria" ho inserito una gallery in jquery ma non credo possa esser quello a dare problemi, visto che lo fa con qualunque altra pagina.

Il problema sorge quando inserisco form, div o strutture "block", invece del classico testo ("inline").

Grazie mille