Olá Alberto, como vai?

No caso, você pode testar diminuindo a tela, seja do seu device mode ou do seu navegador, vendo assim se ficaria bom até mesmo nos menores dispositivos. Para te ajudar, peço que nos envie o seu código html e css por favor.

Aguardo sua resposta :D

Eu testei com o meu código e testei também com o código final disponibilizado para download pelo curso. Em ambos os casos, independente do dispositivo e do navegador, a renderização do site não está correta. A linha do cabeçalho fica em cima do título da chamada, os itens "diferenciais" ficam mais à esquerda da tela e não centralizados (na verdade esses diferenciais aparecem descentralizados mesmo no device mode do navegador do PC).

Então não acredito que se trata de um problema do dispositivo, nem incompatibilidade de navegador. Caso possível testem o código final do curso em um dispositivo móvel.

Nos dispositivos móveis está aparecendo assim: https://imgur.com/a/hMPuVXQ Porém no device mode dos navegadores para PC está sendo renderizado corretamente.

Você pode resolver isso adicionando uma media query para a section chamada, fazendo com que em dispositivos com largura menor que de 400px altere o padding-top dessa section para 15.25rem. Por exemplo:

@media (max-width: 400px) {
   .chamada {
    padding-top: 15.25rem;
   }
}

Então, foi exatamente esta a solução que encontrei. No dispositivo ficou bom e no device mode do navegador ficou esquisito, diferente do dispositivo. É daí que surgiu minha dúvida inicial: porque existe essa discrepância entre o dispositivo e o device mode, e como os programadores fazem no dia a dia pra se certificarem de que no dipositivo do usuário estará correto? Lembrando que testei em dois dispositivos diferentes e com os três principais navegadores do mercado.

Obrigado pelas respostas.

Geralmente não é utilizado fixamente aquele valor que está no device mode, no meu caso, eu vou diminuindo a tela no maximo possivel para não haver erros, ou testo todos os dispositivos que tem por padrão no device mode.