Após puxar o class .lista-menu__titulo, .lista-menu__item, Tudo ficou formatado corretamente, mas a opção categoria no menu hambúrguer não está ficando certa.
Solucionado
Após puxar o class .lista-menu__titulo, .lista-menu__item, Tudo ficou formatado corretamente, mas a opção categoria no menu hambúrguer não está ficando certa.
Oi, Vinicius, tudo bem?
O código que você compartilhou está correto e não poderia ser a causa do problema que você está enfrentando. Dessa forma, para que eu possa te ajudar de forma mais assertiva, peço que compartilhe um link do GitHub ou uma pasta do Google Drive com todos os arquivos do seu projeto. Lembre-se de dar permissão caso use o Google Drive.
Fico no aguardo!
Opa Rodrigo, claro, aqui segue o link do Github do Curso até onde fui!
Oi, Vinicius,
Muito obrigado por compartilhar seu projeto. O problema em questão acontecia, pois você definiu para cada elemento da lista de categorias o mesmo nome de classe tanto para a tag <li> quanto para a tag <a>, de modo que o código ficou assim:
<li class="lista-menu__item">
<a href="#" class="lista-menu__item">Programação</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__item">Front-End</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__item">Infraestrutura</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__item">Bussiness</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__item">Design & UX</a>
</li>
Dessa forma, ao aplicar para a classe lista-menu_item o padding = 1em; o espaçamento interno era contado duas vezes, uma referente a classe que estava inserida na tag <li>e outra referente a classe inserida na tag <a>.
Uma possível solução é alterar o nome da classe nas tags <a>. Ficaria assim:
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Programação</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Front-End</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Infraestrutura</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Bussiness</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Design & UX</a>
</li>
Com isso o espaçamento será contado apenas uma vez e você obterá o resultado igual ao apresentado pela instrutora no curso.
Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum!
Abraços e bons estudos!
Obrigado pela ajuda, realmente me perdi no meio do processo, eu tinha a Class Lista-Menu__Link porém não vi ela no vídeo da aula e achei que podia ter escrito errado... Agora irei corrigir! Grato pela Ajuda!