Aula 01 - atividade 09 - Alterando o projeto existente - informei medidas diferentes (corretas?) das do instrutor

Olá equipe Alura! Os meus arquivos CSSs ficaram diferentes da resposta do instrutor. Vocês poderiam me informar se do jeito que eu fiz está correto? E onde não estiver correto, favor explicar a incoerência. Abaixo os arquivos CSSs, com os trechos de código antes e depois da mudança. OBS: em todos os arquivos CSS incluí o elemento html com font-size de 20px, como base no cálculo de medida relativa/proporcinal, na substituição das medidas em pixels. OBS2: o símbolo menos (-) no início de cada linha indica como estava o código ANTES; o símbolo mais (+) indica como ficou o código DEPOIS da mudança (git diff rsrsrs) Aguardo, desde já muito obrigado! Atte., Elías.

1 - arquivo bio.css

+
+html{
+    font-size: 20px;
+}
+
 .citacao-bio {
     background-color: #D9E5E3;
-    border: 10px solid #C2CCCA;
-    padding: 20px;
-    margin: 20px 40px;
-    width: 250px;
+    border: 0.5rem solid #C2CCCA;
+    padding: 1rem;
+    margin: 1rem 2rem;
+    width: 35%;
     box-sizing: border-box;
 }

2 - arquivo blog.css

+html{
+    font-size: 20px;
+}
+
 .leia-mais {
-    padding: 8px;
-    margin: 16px;
+    padding: 0.4rem;
+    margin: 0.8rem;
     display: block;
-    font-size: 24px;
+    font-size: 1.25rem;
     text-align: center;
     background-color: #E6E7E8;
 }

 .post-blog {
-    padding-bottom: 30px;
-    border-bottom: 1px solid #ccc;
-    margin-bottom: 20px;
+    padding-bottom: 1.5rem;
+    border-bottom: 0.05rem solid #ccc;
+    margin-bottom: 1rem;
 }

3 - arquivo portfolio.css

+html{
+    font-size: 20px;
+}
+
 .portfolio li {
     display: inline-block;
-    border: 8px solid black;
+    border: 0.4rem solid black;
     background-color: #FAFFFC;
     width: 45%;
     box-sizing: border-box;
-    padding: 16px;
-    margin-right: 16px;
-    margin-bottom: 16px;
+    padding: 0.8rem;
+    margin-right: 0.8rem;
+    margin-bottom: 0.8rem;
 }

4 - arquivo site.css

+html{
+    font-size: 20px;
+}
+
 body {
     font-family: "Crimson Text", "Times New Roman", serif;
     background-color: #F2FFFC;
-    font-size: 200%;
     line-height: 1.5;
 }

 h1 {
     text-transform: uppercase;
-    font-size: 60px;
+    font-size: 300%;
 }

 .titulo-principal {
     text-align: center;
     background-color: #851944;
     color: #FFF;
-    padding: 25px;
-    border-bottom: 10px solid #000;
+    padding: 1.2rem;
+    border-bottom: 0.5rem solid #000;
 }

 .subtitulo-texto {
-    font-size: 30px;
+    font-size: 1.5rem;
     clear: both;
 }

 main p {
     text-align: justify;
-    margin: 20px 0;
+    margin: 1rem 0;
 }

 .navegacao-site {
     text-align: center;
     background-color: #3C1D3D;
     color: #F2FFFC;
-    padding: 20px;
+    padding: 1rem;
 }


 .navegacao-site h1 {
-    font-size: 30px;
-    margin-bottom: 25px;
+    font-size: 1.5rem;
+    margin-bottom: 1.25rem;
 }

 .rodape-pagina {
     background-color: #000;
     color: #F2FFFC;
-    padding: 20px;
+    padding: 1rem;
     clear: both;
     position: fixed;
     bottom: 0;
 }

 .container {
-    width: 720px;
+    width: 70%;
     margin-left: auto;
     margin-right: auto;
-    padding: 30px 0;
+    padding: 1.5rem 0;
 }

 .icones-redes-sociais a {
-    width: 40px;
-    height: 40px;
+    width: 2rem;
+    height: 2rem;
     display: block;
     text-indent: -99999px;
 }

 main {
     width: 80%;
     float: left;
-    padding-bottom: 80px;
+    padding-bottom: 4rem;
 }

 .minha-foto,
 .navegacao-site {
-    border-left: 10px solid black;
-    border-bottom: 10px solid black;
+    border-left: 0.5rem solid black;
+    border-bottom: 0.5rem solid black;
     box-sizing: border-box;
 }

main {
     width: 20%;
     float: right;
     position: relative;
-    top: 300px;
+    top: 15rem;
 }

 .minha-foto {
     position: absolute;
     top: 0;
     right: 0;
-    height: 300px;
+    height: 15rem;
 }