Como retirar a borda de um link <a href>? html e Css

Boa noite, sou iniciante em html, utilizo o framework Bulma pra construir o site, como sou novo to aprendendo a utilização ainda, meu codigo está assim:

<header>
<div class="section">
<div class="container">
<div class="columns">
<div id="navbarBasicExample" class="navbar-menu is-active">

<div class="column is-1 has-background-warning">
<a class="navbar-item has-text-centered" href="Index.html" id="bot">
<strong>Home</strong>
</a>
</div>
<div class="column is-1">
<a class="navbar-item has-text-centered" href="Index.html">
<strong>Cardápio</strong>
</a>
</div>
<div class="column is-1">
<a class="navbar-item has-text-centered" href="Index.html">
<strong>Contato</strong>
</a>
</div>

</div>
</div>
</div>
</div>
</header>
quando acesso a pagina e coloco o mouse em cima do Inicio por exemplo, aparece uma borda quadrada branca (a cor de fundo da pagina é rosa). Ja tentei colocar uma id no na <a class="navbar"...> como esta ali, ai no arquivo do css eu coloquei
#bot
{
outline: none;
border: none;
text-decoration: none;
}
pra tentar retirar, mas nao deu certo, alguem teria alguma ideia? Obrigado