Problema html5

Hola gente, vereis, es la primera página web que hago, sin embargo tengo bastante idea sobre la teoria, como usarlo, sintaxis, etc etc.
He querido hacer la web en html5, por ahora solo llevo el principio, casi nada, ni imagenes ni nada, solo el posicionamiento de cada cosa, pero estoy teniendo bastantes problemas y me gustaria que le echarais un ojo

Código

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>e-links</title>
        <link rel="shortcut icon" href="favicon.jpg"/>
        <link rel="stylesheet" href="style.css" media="screen" type="text/css"/>
    </head>
    <body>
        <header id="cabecera">
            <h1>e-links</h1>
            <h2>Comparte tus links y gana dinero</h2>
        </header>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Registrate</a></li>
                <li><a href="#">¿Quienes somos?</a></li>
                <li><a href="#">Logueate</a></li>
            </ul>
        </nav>
        <div id="principal">
            <section id="intro">
                <div id="papel">
                    <!-- Imagen -->
                    <img src="post-it.png"></img>
                </div>
                <div>
                    <header>
                        <p>Comparte</p>
                    </header>
                    <div id="drop-zone">
                        <script>
                            var dropzone = document.querySelector('#drop-zone');
 
                            dropzone.addEventListener('dragover', function(event){
                                if(event.preventDefault) event.preventDefault();
                                event.dataTransfer.dropEffect = 'copy';
                                return false;
                            }, false);
 
                            dropzone.addEventListener('drop', function(event){
                                if(event.preventDefault) event.preventDefault();
 
                                this.innerHTML = '';
                                if(event.dataTransfer.getData('text')){
                                    this.innerHTML = event.dataTransfer.getData('text');
                                }else if (event.dataTransfer.getData('text/plain')){
                                    this.innerHTML = event.dataTransfer.getData('text/plain');
                                }
 
                                return false;
                            }, false);
                        </script>
                    </div>
                </div>
            </section>
            <section>
                <header>
                    <p>¿Como funciona?</p>
                </header>
                    <video controls="true" loop="false" onended="this.stop()">
                        <source src="http://studio.html5rocks.com/samples/video-cube/Chrome_ImF.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
                    </video>
            </section>
            <section>
                <header>
                    <p>Comentarios</p>
                </header>
                <!-- Tabla con comentarios -->
            </section>
        </div>
        <footer>
            <ul>
                <li><small><a href="#">¿Quienes somos?</a></small></li>
                <li><small><a href="#">Política de privacidad</a></small></li>
                <li><small><a href="#">Como ganar dinero</a></small></li>
            </ul>
        </footer>
    </body>
</html>

Código

div{
    border: solid red 2px;
}
/*-------
-----*/
* {
    margin: 0;
    padding: 0;
}
 
section, aside, header, footer, nav, article {
    display: block;
}
 
body{
    background: white;
}
/*----------
--> Header
----------*/
header#cabecera{
    background: #897a7a;
}
    header h1{
        text-align: center;
    }
 
/*----------
-->Nav
----------*/
nav{
    width: 100%;
    position: absolute;
    left: 0;
    background-color: orange;
    padding-left: 15%;
    padding-right: 15%;
}
    nav ul{
        padding: 3px;
        list-style: none;
    }
        nav ul li{
 
            text-align: center;
            float: left;
            margin: 10px 30px 10px 30px;
        }
            nav ul li a{
                display: block;
                text-decoration: none;
            }
 
 
/*----------
-->Main div
----------*/
 
div#principal{
    margin: 55px 15% 0 15%;
}
 
section#intro{
    border: solid black;
    width: 100%;    
}
    section#intro div{
        float: left;
        margin: auto 5% auto 5%;
    }
 
#drop-zone{
    width : 200px;
    height: 200px;
}
 
/*---------
-->Footer
---------*/
footer{
    background-color: #897a7a;
    padding: 0 10% 0 10%;
}
    footer ul{
        list-style: none;
    }
        footer ul li{
            float: left;
            margin-right: 10%;
            margin-top: 2%;
        }
            footer ul li a{
                display:block;
                text-decoration: none;
            }

La verdad es que hay varias cosas que me tienen pertubado en mi código:

Aunque le ponga un background al footer el color del footer no cambia mientras tenga definido el estilo de la lista del footer (solo con atributos sobre el texto)
Le he puesto borde a los div y a un section para saber donde estan, y el section (la linea de negro), aunque tiene contenido entre <section></section> lo que se supone que deberia estar dentro aparece debajo de este.
El div#principal no respeta la posición del nav, y se superpone con esta, (ahi no se vera porque le tengo puesto un margin-top.
Lo ultimo, aunque no es tan importante, es que no consigo hacer para que el section#intro me ocupe todo el ancho de la pagina, aunque le ponga width:100% el texto que se supone que esta fuera aparece a la derecha del section.

Si lo necesitais os marco las zonas que he señalado antes xD
OJALA PODAIS AYUDARME!

<html>
<head>
<style type="text/css">
.thumbnail
{
//float:left; esto lo descomentas y lo comentas para que veas los dos comportameintos
width:110px;
height:90px;
margin:5px;
}
#hola{border: 1px solid red;}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<div id='hola'>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</div>
</body>
</html>