#main {
  width: 600px;
  margin: 0 auto; 
}

	#main {
  	max-width: 600px;
  	margin: 0 auto; 
}

 (ancho máximo)

	.simple {
  	width: 500px;
 	margin: 20px auto;
}

	.fancy {
  	width: 500px;
  	margin: 20px auto;
  	padding: 50px;
 	border-width: 10px;
}

	.simple {
 	 width: 500px;
  	margin: 20px auto;
  	-webkit-box-sizing: border-box;
   	  -moz-box-sizing: border-box;
       	   box-sizing: border-box;
}	

	.fancy {
  	width: 500px;
  	margin: 20px auto;
  	padding: 50px;
  	border: solid blue 10px;
  	-webkit-box-sizing: border-box;
     	-moz-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  	-webkit-box-sizing: border-box;
     	-moz-box-sizing: border-box;
          box-sizing: border-box;
}

	.static {
  	position: static;
}

	.relative1 {
  	position: relative;
}
	.relative2 {
  	position: relative;
  	top: -20px;
  	left: 20px;
  	background-color: white;
  	width: 500px;
}

	.fixed {
  	position: fixed;
  	bottom: 0;
  	right: 0;
  	width: 200px;
  	background-color: white;
}


	.relative {
  	position: relative;
  	width: 600px;
  	height: 400px;
}
	.absolute {
  	position: absolute;
  	top: 120px;
  	right: 0;
  	width: 300px;
  	height: 200px;
}




	.container {
  	position: relative;
}
	nav {
  	position: absolute;
  	left: 0px;
  	width: 200px;
}
	section {
  	/* position is static by default */
  	margin-left: 200px;
}
	footer {
  	position: fixed;
  	bottom: 0;
  	left: 0;
  	height: 70px;
  	background-color: white;
  	width: 100%;
}
	body {

	img {
  	float: right;
  	margin: 0 0 1em 1em;
}




	<div class="box">...</div>
	<section>...</section>


	.box {
  	float: left;
  	width: 200px;
  	height: 100px;
  	margin: 1em;
}

	.box {
  	float: left;
  	width: 200px;
  	height: 100px;
  	margin: 1em;
}
	
	.after-box {
  	clear: left;
}

	img {
  	float: right;
}


	.clearfix {
  	overflow: auto;
}


	.clearfix {
  	overflow: auto;
  	zoom: 1;
}


	nav {
  	float: left;
  	width: 200px;
}
	section {
  	margin-left: 200px;
}


	article img {
  	float: right;
  	width: 50%;




	nav {
  	float: left;
  	width: 25%;
}
	section {
  	margin-left: 25%;
}




	@media screen and (min-width:600px) {
  	nav {
    	float: left;
    	width: 25%;
  }
  	section {
    	margin-left: 25%;
  }
}
	@media screen and (max-width:599px) {
  	nav li {
    	display: inline;
  }


	.box {
  	float: left;
  	width: 200px;
  	height: 100px;
  	margin: 1em;
}
	.after-box {
  	clear: left;
}



	.box2 {
  	display: inline-block;
  	width: 200px;
  	height: 100px;
  	margin: 1em;
}





	nav {
  	display: inline-block;
  	vertical-align: top;
  	width: 25%;
}
	.column {
  	display: inline-block;
  	vertical-align: top;
  	width: 75%;
}



	.three-column {
  	padding: 1em;
  	-moz-column-count: 3;
  	-moz-column-gap: 1em;
  	-webkit-column-count: 3;
  	-webkit-column-gap: 1em;
  	column-count: 3;
  	column-gap: 1em;



	.container {
  	display: -webkit-flex;
  	display: flex;
}
	nav {
  	width: 200px;
}
	.flex-column {
  	-webkit-flex: 1;
          flex: 1;
}

	.container {
  	display: -webkit-flex;
  	display: flex;
}
	.initial {
  	-webkit-flex: initial;
          flex: initial;
  	width: 200px;
  	min-width: 100px;
}
	.none {
  	-webkit-flex: none;
          flex: none;
  	width: 200px;
}
	.flex1 {
  	-webkit-flex: 1;
          flex: 1;
}
	.flex2 {
  	-webkit-flex: 2;
          flex: 2;
}

	.vertical-container {
  	height: 300px;
  	display: -webkit-flex;
  	display:         flex;
  	-webkit-align-items: center;
          align-items: center;
  	-webkit-justify-content: center;
          justify-content: center;
}