Web Adaptable En Dos Pasos

Buenas chic@s!!

Me encuentro con un problemita y no se como solucionarlo...

Quiero hacer una página web que se adapte al ancho de la pantalla con la que es visitada, al cuerpo contenedor le he dado 60% de ancho y lo he centrado al centro con margin-left: 20% y margin-rigth: 20%. hasta ahí todo bien. El problema es que al reducir la pantalla siempre mantiene esa proporción de 20% 60% 20% y lo que yo quiero es que la web al ser reducida pierda primero los márgenes mientras mantiene el tamaño del contenido y después empiece a reducir el tamaño del contenido.

Algo tipo a esto: http://www.supercell.net/games/view/clash-of-clans

seguro que es una tontería... pero estoy atascado.

Un saludo!

En la página a la que haces mención, la imagen de fondo ocupa el 100% del ancho, mientras que el menú cambia de apariencia cuando la resolución del dispositivo tiene 767 píxeles como máximo de ancho. Esto es fácil de manipular mediante el uso de media queries, que es lo que utiliza esa página para lograr dicha apariencia. Dale una leída a la documentación que te estoy dejando para que aprendas más al respecto.

Por cierto, para centrar un elemento en el eje horizontal, te basta con asignar el siguiente valor a la propiedad margin:

Código CSS :

#id_elemento{
    margin: 0 auto;
}

Saludos