Voy a enumerar los problemas del ejercicio que he tengo:
El ejercicio debería mostrarse completo en la ventana del navegador (o por lo menos eso es lo que yo quisiera que sucediera) incluyendo una parte inferior que no se muestra en este momento que contiene otro "article" y el "footer".
El titulo "main" debería quedar centrado sobre los títulos "section y aside" y no de forma lateral como se ve en este momento.
Dentro de la etiqueta "section" tengo dos etiquetas "article" y estas deberían poder organizarse dividiéndose dinámicamente el espacio que exista dentro de "section", como se puede observar no lo hacen en este momento.
Por ultimo, como estoy aprendiendo hasta ahora, reuní en el "style.css" una sección que llame "Buenas Practicas CSS" pero no se si en realidad lo sean, me gustaría sus comentarios sobre mi código para corregir todos mis errores y así aprender mas.
Les envió el código de mi "index.html" y de mi "style.css" :
/* -- Buenas Practicas CSS -- */
html {
font-size: 62.5%;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
html, body {
min-height: 100vh;
}
body {
font-size: 1.6rem;
line-height: 2;
}
/* -- Globales -- */
.container {
max-width: 120rem;
width: 90%;
margin: 0 auto;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
text-align: center;
}
header, nav, main, section, article, aside, footer {
border-radius: 1.5rem;
/* padding: 0; */
}
/* -- Body -- */
body {
background-color: #797572;
background-image:
linear-gradient(-173deg, rgba(255,255,255,0.20) 0%, #000000 100%),
linear-gradient(72deg, rgba(255,255,255,0.25) 25%, rgba(0,0,0,0.25) 100%),
radial-gradient(47% 102%, rgba(255,255,255,0.50) 0%, rgba(21,24,32,0.60) 120%);
background-blend-mode: multiply;
}
/* -- Header -- */
header {
margin-top: 1rem;
height: 15rem;
background-image: linear-gradient(to bottom, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%),
linear-gradient(to bottom, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%),
linear-gradient(to bottom, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 150%),
radial-gradient(at 50% 59%, rgba(255,255,255,0.30) 66%, rgba(0,0,0,0.30) 200%);
background-blend-mode: multiply,multiply,screen;
}
/* -- Nav -- */
nav {
margin-top: 0.1rem;
background-image: radial-gradient(27% 185%, #F9F6F1 0%, #D7D0C5 100%);
}
/* -- Main -- */
main {
height:100vh;
display: flex;
margin-top: 0.1rem;
background-color: #CDDCDC;
background-image:
radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%),
linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);
background-blend-mode: screen, overlay;
}
/* -- Section -- */
section {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 70%;
margin: 1rem 0.1rem 1rem 1rem;
background-image: linear-gradient(-90deg, #596164 1%, #868F96 99%);
}
/* -- Article -- */
article {
margin: 6rem 1rem 6rem 1rem;
background:
linear-gradient(-180deg, rgba(255, 255, 255, 0.50) 2%, rgba(0, 0, 0, 0.50) 100%),
radial-gradient(51% 97%, #E8E8E8 7%, #CCCCCC 97%);
background-blend-mode: multiply;
}
/* -- Aside -- */
aside {
width: 30%;
margin: 1rem 1rem 1rem 0.1rem;
background-color: #9D9B97;
background-image:
radial-gradient(at 50% 85%, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 150%),
linear-gradient(to top, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
background-blend-mode: normal, multiply;
}
/* -- Footer -- */
footer {
bottom: 0;
margin-top: 0.1rem;
margin-bottom: 1rem;
height: 15rem;
background: #989898;
background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%),
radial-gradient(at 50% -100%, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 270%),
radial-gradient(at 50% 2%, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
background-blend-mode: normal,multiply,multiply;
}
p {
display: flex;
justify-content: center;
align-items: center;
margin: 3rem;
text-align: justify;
}
h1 {
font-size: 3rem;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preload" href="../src/css/normalize.css" as="style">
<link rel="stylesheet" href="../src/css/normalize.css">
<link rel="preload" href="../src/css/style.css" as="style">
<link rel="stylesheet" href="../src/css/style.css">
<link rel="shortcut icon" href="#">
<title>Document</title>
</head>
<body>
<div class="container">
<header class="header">
<h1><header></h1>
</header>
<nav class="nav">
<h1><nav></h1>
</nav>
<main class="main">
<h1><main></h1>
<section class="section">
<h1><section></h1>
<article class="article">
<h1><article></h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit, lacus sed hendrerit posuere, augue tellus molestie metus,
sed pretium erat urna non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis quam justo,
eget auctor libero molestie vitae. Vivamus imperdiet, quam vel vestibulum tempus, felis dui fermentum elit,
ac sollicitudin eros tortor eu ex. Proin imperdiet iaculis nunc, eget ullamcorper arcu vulputate in.
In hac habitasse platea dictumst. Maecenas ornare sagittis lobortis. Nunc tempor consectetur neque,
accumsan iaculis enim tincidunt sit amet. Proin egestas ut urna eu ultricies.</p> -->
</article>
<article class="article">
<h1><article></h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit, lacus sed hendrerit posuere, augue tellus molestie metus,
sed pretium erat urna non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis quam justo,
eget auctor libero molestie vitae. Vivamus imperdiet, quam vel vestibulum tempus, felis dui fermentum elit,
ac sollicitudin eros tortor eu ex. Proin imperdiet iaculis nunc, eget ullamcorper arcu vulputate in.
In hac habitasse platea dictumst. Maecenas ornare sagittis lobortis. Nunc tempor consectetur neque,
accumsan iaculis enim tincidunt sit amet. Proin egestas ut urna eu ultricies.</p> -->
</article>
</section>
<aside class="aside">
<h1><aside></h1>
</aside>
</main>
<footer class="footer">
<h1><footer></h1>
</footer>
</div>
</body>
</html>
Agradezco su ayuda para despejar mis dudas.
.container
tiene un ancho de 90%. Prueba con 100%...