Solucionado
No HTML do site de produtos , quando eu abro esse arquivo no Chrome esse arquivo html fica perfeitamente ajustado, só que se eu abrir no Firefox os espaçamentos não encaixa direito como no Chrome e quando eu ajusto o arquivo para ajustar melhor no Firefox, ele não fica tão bem ajustado no chrome e isso me gerou uma dúvida , se cada broswer ele ler de forma diferente o meu HTML , e se sim, como é que se trabalha o desenvolvedor front-end em cima dessa diferença ?
Oi, Pedro, tudo bem?
Você está usando o reset.css que o instrutor adicionou ao projeto? Veja se ele está adicionado ao seu projeto. É esse técnica que vai eleminiar essa estilizações de cada browser, tentando criar um "padrão" entre os browsers e evitar que essas diferenças entre os browsers aconteçam.
Mas eu observei e está o reset.css no meu código
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
///restante do código omitido.
...
<html>Achei a solução, no curso de HTML 5 e CSS3 no tópico de fontes externas AULA 02, o professor comentou sobre fontes preparadas para web e como exportá-las , sendo relatada que ela possuem comportamentos parecidos em todos os sistemas operacionais e navegadores.
Enfim quando adicionai no meu arquivo HTML todos os elementos ficaram corretamente ajustados na página , no qual anteriormente, mesmo seguindo exatamente igual os passos do professor e colocando o reset.css davam diferencia entre os espaçamentos do firefox e do chrome.
Obrigado como sempre, pela atenção.
Obrogada você, Pedro por ter compartilhado com a comunidade a sua solução. Ela é de suma importância!