Alessandro almeida

consegui resolver o probrema estava no html, tirei o icone de dentro da ancora <a></a> e ficou assim <li id="iacessar"><a class="acessar" href="/">Acessar</a> <span class="material-icons">login</span></li> removi o -10px de margin q estava na class="acessar" e criei um id para poder alinhar os dois desse jeito: #iacessar { display: flex; align-items: center; color: #0059F1; e o resultado final ficou assim

estou tendo problema na formatação de css no icone do google icons, já tentei de tudo para deixar ele alinhado com o texto, mas não consigo. alguém pode me dizer oque eu fiz de errado para poder consertar? esse é o desenvolvimento do html <nav id="nav"> <button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">Menu <span id="hamburger"></span> </button> <ul id="menu" role="menu"> <li><a href="/">Sobre</a></li> <li><a href="/">Produtos</a></li> <li><a href="/">Portfólio</a></li> <li><a class="acessar" href="/">Acessar<span class="material-icons">login</span></a></li> <li><a href="/"><input type="submit" value="Começar agora"></a></li> </ul> </nav> e esse a do css dessa parte .acessar { color: #0059F1; font-weight: 500; margin-top: -10px; } #header { box-sizing: border-box; height: 70px; padding: 1rem; display: flex; align-items: center; justify-content: space-around; } #menu { display: flex; align-items: center; list-style: none; gap: 0.5rem; } #menu a { display: block; padding: 0.5rem; } #menu input { margin: auto; cursor: pointer; color: white; font-size: 16px; background-color: #0059F1; width: 130px; height: 30px; border: none; border-radius: 12px; }