Lo maravilloso de max-width

#main {
          width: 600px;
          margin: 0 auto; 
          }
<div id="main">

Ajustar la propiedad width de un elemento block-level lo previene de estirarse hasta los bordes de su contenedor a la izquierda y derecha. Después puedes establecer la propiedad margin left y right para que sea auto y centrar de manera horizontal ese elemento en su contenedor. El elemento tomará el ancho que especificaste, después el espacio sobrante será dividido equitativamente entre los dos márgenes. El único problema ocurre cuando el ancho del navegador es menor que el de tu elemento. El navegador resuelve esto creando una barra de desplazamiento (scrollbar) horizontal en la página y esto esta situación se arregla con max-width en vez de width !Que tal!.

En esta segunda sección se incluye otras caracteristicas para continuar dando respuesta a los requisitos de la entrega obligatoria entre los que podemos resaltar <colores degradados y bordes redondeados en alguna de sus cajas>, <distintos encabezados> entre otros.

</div>