Desplazamiento del menu.

[esnalca]

Mira yo tengo este header en HTML:

Código HTML:

 <header class="principal">
      <div class="fila">
          <a href="#" class="logo">Logo</a>
          <nav class="nav_princ">
          	<ul>
              <li><a class="inicio" target="_self" style="cursor: pointer;">Inicio</a></li>
               <li><a class="desc" href="#">Descripcion</a></li>
               <li><a class="blog" href="#">Blog</a></li>
               <li><a class="contc" href="#">Contacto</a></li>
            </ul>   
          </nav>
      </div>
   </header> 

Y luego este es mi CSS y lo que me pasa es que el nav_princ cuando ago mas pequeña la pantalla se me desplaza en vez de esconderse.

Código:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, strong, ul, li, article, footer, header, nav, section
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    overflow: none;
}

article, footer, header, nav, section 
{
    display: block;
}

body 
{ 
    font: 25px sans-serif; 
    font-size:small;
}

html 
{ 
    width: 100%;
    background: white scroll; 
    overflow-y: scroll;
    z-index: 500;
    max-width: 1500px;
}

a, a:hover, a:active 
{ 
    outline: none;
}

ul
{ 
    margin-left: 2em;
}

nav ul, nav li 
{ 
    margin: 0; 
    list-style:none; 
    list-style-image: none;
}


body
{
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:400;
    font-style: normal; 
    font-size:15px; 
    line-height:21px;
}

h1, h2, h3, h4, h5, h6 
{
    font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif  
}

a, a:active, a:visited 
{ 
    text-decoration:none;
}

a:hover 
{ 
    text-decoration:underline;
}


/** Header**/

header.principal
{
    width: 100%;
    height: 125px;
    float: left;
    margin-top: 2%;
    }

a.logo
{
    border: 1px solid white;
    width: 550px;
    height: 70px;
    clear: left;
    float: left;
    margin: 30px 50px;
    background:transparent url(../img/logo.png) no-repeat 0 0;
    font-size: 0;
}

a.logo:hover
{
    width: 550px;
    height: 70px;
    clear: left;
    float: left;
    margin: 30px 50px;
    background:transparent url(../img/logo_hover.png) no-repeat 0 0;
    font-size: 0;
}

nav.nav_princ
{
    border: 1px solid white;
    width: 550px;
    height: 55px;
    float:left;
    margin-top: 30px;
    font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size:18px;
    color: #4A4A4A;
    text-shadow: #4A4A4A 0 1px 0;
}

nav.navegacion_principal 
{
    height:42px;
    float:left;
    font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size:18px;
    color:#3b3b3b;
    text-shadow:#fff 0 1px 0;
    line-height:42px;
    font-weight:400; 
    border:thin solid #e9e9e9; 
    border-width:0 0 0 1px;
}

nav.nav_princ ul li 
{
    clear:right;
    float:left;
    margin: 0 10px;
    font-size: 0px;
}

a.inicio
{
    width: 90px;
    height: 50px;
    background: url(../img/inicio.png);
    float: left;
}

a.blog
{
    width: 90px;
    height: 50px;
    background: url(../img/blog.png);
    float: left;
}

a.desc
{
    width: 140px;
    height: 50px;
    background: url(../img/desc.png) no-repeat;
    float: left;
}

a.contc
{
    width: 140px;
    height: 50px;
    background: url(../img/contac.png) no-repeat;
    float: left;
}

a.inicio:hover
{
    width: 90px;
    height: 50px;
    background: url(../img/inicio_hover.png);
    float: left;
}

a.blog:hover
{
    width: 90px;
    height: 50px;
    background: url(../img/Blog_hover.png);
    float: left;   
}

a.desc:hover
{
    width: 140px;
    height: 50px;
    background: url(../img/desc_hover.png) no-repeat;
    float: left;
}

a.contc:hover 
{
    width: 140px;
    height: 50px;
    background: url(../img/contac_hover.png) no-repeat;
    float: left;
}