Solucionado
Mesmo seguindo passo a passo as instruções meu projeto fica todo desconfigurado, não sei se são meus navegadores , mas experimentando no 3 que possuo (Edge, Chrome e Opera), ocorre o mesmo erro. Segue em anexo a imagens e Também envio os arquivos.
Segue meu repositório com código até o momento: https://github.com/MarcioVRED/AluraBooks
Oi, Márcio
O Index.html o arquivo "style.css" está com o nome diferente
<link rel="stylesheet" href="styles.css">
Oi, Márcio, tudo bem?
O problema que você está enfrentando ocorre por conta das importações do documento style.cssno arquivo index.html e dos documentos header.css, banner.css e carrossel.css no arquivo de estilo principal style.css.
No caso do arquivo HTML, você está colocando uma letra "s" a mais no final da palavra style ao fazer a referência do arquivo style.cssna tag <link>. Para corrigir basta remover essa letra "s". Ficaria assim:
<link rel="stylesheet" href="style.css">
Já no caso do arquivo CSS, as três importações das folhas de estilo para o header, banner e carrossel foram feitas utilizando uma barra antes da palavra style. Dessa forma, o caminho dos arquivos está incorreto e, portanto, não é incorporado à página no navegador. Para corrigir você pode atribuir um ponto antes da barra ou apenas remover a barra. Ficaria assim:
Acrescentando um ponto antes da barra:
@import url(./styles/header.css);
@import url(./styles/banner.css);
@import url(./styles/carrossel.css);
Removendo a barra:
@import url(styles/header.css);
@import url(styles/banner.css);
@import url(styles/carrossel.css);
Você pode optar pela forma que preferir para solucionar o problema das importações.
Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum.
Abraços!
Valeu Pessoal, muito obrigado ! As vezes não percebemos pequenos detalhes.