Dúvida conversão px para % e CH no width

Olá, bom dia.

Eu entendi que algumas propriedades, como por exemplo padding, font-size e margin, o cálculo é feito do tamanho da fonte do navegador.

Mas não entendi quando a largura da página, por exemplo, da classe ".corpopagiprincipal", mudou de 720px para 80ch, como conseguiu chegar neste resultado?

Tenho uma outra dúvida, com relação ao "main", e as classes ".navegacao" e ".rodape", como que chegou no resultado da largura (width 80%) e como chegou no resultado de (width: 20%;). O rodapé sei que tinha a largura de 20px, mas como colocou 100%. Preciso ter saber como foi feito o cálculo para chegar neste resultado.

Ou como vou saber para colocar estes resultados.

Segue algumas partes do meu código.

html{
    font-size: 120%; /* parte 2 => Colocando fonte size 200% o conteúdo fica mais larga, se colocarmos 100% a borda diminui, podemos controlar o rem pela configuração do navegador, ou pelo fonte size do html, podemos colocar fonte-size e colocar no html e o rem faz sentido em toda nossa página*/
}

.rodape {
    background-color: black;/*Parte 1*/
    color: #F2FFFC;    /*Parte 1*/
    clear: both; /*Parte 1*/
    position: fixed;/*Parte 1*/
    bottom: 0px;/*Parte 1*/
    width: 100%; /*Parte 1 - Parte 2 200000/1905=104,98*/
    padding: 1em; /*Parte 1".navegacao, .rodape" - Parte 2 - 20/20=1em ou 20/16=1,25em */
}

.corpopagiprincipal{ /*Parte 1 -> Exercício 03 - cap-5* conteúdo principal - *Exercício 06 - módulo 8 Feito troca main div por classe texto-*/
    width: 80ch;/*Parte 1 - Parte 2 720px para ch*/
    margin: auto;/*Parte 1*/
    padding: 1.5em 0;/*Parte 1 - Parte 2 - 30/20=1.5em // 40/20=2em ou 40/16=2,5em */
    /*padding-bottom: 4em;/*Parte 1 - Parte 2 80/20=4*/
}

main{
    float: left;/*Parte 1*/
    width: 80%;/*Parte 1 -> Parte 2 - 86% da largura da tela do nosso navegador, a % é uma medida diferente e depende do contexto que será usada (no aside estamos usando 14% de largura) e funciona com relação a largura da tela, mas nem sempre é (exemplo citação)*/
    box-sizing: border-box;/*Parte 1*/
    padding-bottom: 4em;/* Parte 2 80/20=4**/
}

.rodape {
    background-color: black;/*Parte 1*/
    color: #F2FFFC;    /*Parte 1*/
    clear: both; /*Parte 1*/
    position: fixed;/*Parte 1*/
    bottom: 0px;/*Parte 1*/
    width: 100%; /*Parte 1 - Parte 2 200000/1905=104,98*/
    padding: 1em; /*Parte 1".navegacao, .rodape" - Parte 2 - 20/20=1em ou 20/16=1,25em */
}

.navegacao {
    width: 20%;/*Parte 1 - não lembro qual era o valor em px*/
    position: relative;/*Parte 1*/
    top: 300px;/*Parte 1*/
}