Não sei se está funcionando para celular , me ajudem . | HTML5 e CSS3 parte 4: avançando no CSS

Pessoal minha pagina não está como a do professor segue os códigos . index

    <link rel ="stylesheet" href="banner/reset.css">
    <link rel="stylesheet" href="style.css">
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&display=swap" rel="stylesheet">

</head>

<body>
    <header>
        <div class="caixa">
        <h1> <img src="banner/logo.png"></h1>
        <nav>
            <ul>
                <lia><a href="index.html">Home</a></lia>
                <lia><a href="produtos.html">Produtos</a></lia>
                <lia><a href="index.html">Contato</a></lia>
        </ul>
    </nav>
</div>
    </header>


    <img class ="banner" src="banner/banner.jpg.jpg">

    <main>
    <section class="principal">
        <h2 class="titulo-principal">Sobre a Barbearia Alura</h2>

        <img class="utensilios" src="banner/utensilios.jpg" alt="Utensilios de um barbeiro.">

        <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. 
        Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

        <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

        <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda.O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
    </section>

    <section class="mapa">

<h3 class="titulo-principal">Nosso estabelecimento</h3>
<p>Nosso estabelecimento está localizado no coração da cidade.</p>

Benefícios

Atendimento aos Clientes
Espaço Diferenciado
Localização
Profissionais Qualificados

Oi Robson, tudo bem?

Na sua head está faltando algumas tags meta, como:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

Sendo essa segunda bem importante para que seu site possa funcionar em telas com diferentes tamanhos.

Basicamente o começo do seu projeto no index tem que está assim:

<!DOCTYPE html>
<html lang="pt-br">
    <head> 
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap" rel="stylesheet"> 
    </head>

Bons estudos.

Benefícios

Mergulhe em programação