Fonte Desproporcional

Boa noite,

Estou enfrentando a seguinte situação:

Tenho uma página que se chama sobre.html, uma parte do main tenho este código:

<div class="titulo">
        <h1> Sobre nós </h1>
        <p> Aqui será escrito um texto falando um pouco da história da redmotos, quantos anos de fundação, etc.</p>
</div>

Também tenho uma página que se chama pecaseacessorios.html, uma parte do main tenho este código:

<div class="titulo">
        <h1>Peças e Acessórios</h1>
        <p>Para consultar a disponibilidade de peças e acessórios, basta acessar um de nossos canais abaixo:</p>
 </div>

<div class="canais">
         <ul>
                <li><img src="Shopee.png"></li>
                <li><img src="MercadoLivre.png"></li>
                <li><img src="LojaFisica.png"></li>
         </ul>
<p>Você também pode entrar em contato através do nosso telefone: <strong>(19) 3838 2682</strong>.<br> ou pelo nosso formulário de contato <a href="contato.html">Clicando Aqui!</a></p>
 </div>

As respectivas configurações no CSS são:

.titulo {
    background: #000000;
    text-align: center;
    padding-bottom: 25px;
}
.titulo h1 {
    font-weight: bold;
    color: #FF0000;
    font-size: 1.5em;
    padding: 20px 0;
}

.titulo p {
    color: #FFFFFF;
    font-size: 1.0em;
    padding: 0 0 15px;
}

.titulo p a {
    text-decoration: none;
    color: #FF0000;
}

.titulo p a:hover {
    color: #FFFFFF;
}

e

.canais {
    padding: 0 0 50px;
    text-align: center;
    background: #000000;
}

.canais p {
  color: #FFFFFF;
  font-size: 1em;
  padding: 15px 0 15px;
}
.canais ul li img {
    width: 300px;
}
.canais ul li {
    display: inline-block;
    vertical-align: top;
}

O meu problema é: quando eu acesso via celular, na página Sobre, fica um tamanho legal, do jeito que eu configurei. E quando eu acesso a página Peças e Acessórios fica um tamanho grande, e como podem ver a configuração está igual para ambas.

Obrigado!