Trabajando con Responsive Aeon

[YolandaGC]

Hola saludos al foro de nuevo; estoy modificando una web con Responsive Aeon framework de Fernando Monteiro y me cuesta entenderlo en su plenitud.
El tema de las grids o columnas, es lo que no acabo de entender y, lo que tengo hasta ahora, no me aparece responsive al hacer pequeña la ventana del navegador.

Lo que tengo hasta ahora en imágen:



Me pregunto como debería usar el sistema de grids y responsive en mi header(logo y navegación):

Código HTML:

<div class="container"><!--Beginning of content-->
	<div class="content">
    <div class="header">
    <img src="images/logo.png" width="786" height="163" title="Mar Rodríguez Micropigmentación">
        <nav>
				<ul id="nav">
					<li><a href="#">Home</a></li>
					<li><a href="#">Qué Es</a></li>
					<li><a href="#">Contacto</a></li>
	  </ul>
	  </nav>
      </div><!-- /header -->
      
  </div><!-- /content -->
</div><!-- /container --> 

Código:

.container {
    max-width:1104px;
	margin:0 auto;
	width:100%;
}

.content{
	max-width:1084px;
	padding: 0 10px;
}

.full {
    width: 100%;
    margin-right: 0%;
    overflow: hidden;
    display: block;
    clear: both;
}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float:left;
	margin-right:1.845%;
}

/*Default + 12 COLUMNAS*/
 .col1{width:6.642%;}
 .col2{width:15.129%;}  
 .col3{width:23.616%;}  
 .col4{width:32.103%;}  
 .col5{width:40.590%;}  
 .col6{width:49.077%;}  
 .col7{width:57.546%;}  
 .col8{width:66.051%;}  
 .col9{width:74.538%;}  
 .col10{width:83.025%;} 
 .col11{width:91.512%;} 
 .col12{width:100%; margin-right:0px;} 

.first {margin-left: 0%;}
.last {margin-right: 0%;}

Si puediérais darme una pequeña ayuda para ello, os estaría agradecida.
Un saludo!