/* Visit https://www.w3schools.com/css/css_website_layout.asp 
https://www.w3schools.com/html/html5_semantic_elements.asp
*/
/* CSS POSITION PROPERTIES */
body {
	margin: 0;  /* Por defecto, el body tiene un margen respecto a los bordes */
}

nav, section, aside {
	padding: 15px;
	overflow: auto;
	box-sizing: border-box; /* Con esto, el width incluirá el padding y el border */

/* POSIBILIDAD 1:  inline-block */
/* El problema son los márgenes internos que deja
	display: inline-block;
	vertical-align: top;
 */

/* POSIBILIDAD 2:  float: left;	
	float: left;*/
}

/* POSIBILIDAD 3:  FLEX en elemento padre (main) */

main {
	display: inline-flex;
	justify-content: space-evenly; /* No necesario si los elementos hijo usan el 100% del ancho */	
}

nav, aside {
	width: 20%;
}

section {
	width: 59%;  /* No puede usarse 60% con el display: inline-block; deja espacios entre los elementos, debidos a los saltos de línea del HTML  */
	/* Ver:  http://blog.alejandromolero.com/css-corregir-margen-en-elementos-inline-block/ para posibles soluciones */
}

/* CSS FORMATTING PROPERTIES */
header {
	text-shadow: 2px 2px 2px grey;
	font-size: 1.5em;
}

header, footer {
	background-color: red;
	text-align: center;
	padding: 10px 0px 10px 0px; /* Permite centrar texto verticalmente */
	width: 100%;
}

aside {
	border-left: 2px dotted red;
}

article {
	background-color: #ffe6e6;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 5px;
}

nav a {
	display: block;
	background-color: red;
	color: white;
	padding: 5px;
	margin: 3px;
	border-radius: 4px;
}

nav a:hover {
	background-color: #ffe6e6;
	color: red;
}