Positionner des boutons.

Bonjour (c'est encore moi),

Comment feriez vous pour positionner les boutons entourés et encadrés dans l'image ci-dessous juste a côté de J-Anime ? En suivant de multiple tutoriel je n'arrive pas a sélectionner tous sa et le bouger.
J'ai essayé padding mais sans résultat mise a part l'écart entre chaque bouton.



HTML :

 </header>
  <!-- Menu de navigation -->
 <nav class="navigation">
  <ul>
   <li class="btn">    
    <a href="#" rel="nofollow noopener noreferrer" target="_blank">Accueil</a> 
   </li>
   <li class="btn">
    <a href="Liste Anime.html" rel="nofollow noopener noreferrer" target="_blank">Anime</a>
   </li>
   <li class="btn">
    <a href="Youtube.html" rel="nofollow noopener noreferrer" target="_blank">Youtube</a>
   </li>
  </ul>
 </nav>

CSS:

nav.navigation ul li.btn{
 display: inline-block;
}

nav.navigation ul li.btn{
 list-style-type: none;

}

nav.navigation ul li.btn a{
 color: white;
 font-weight: bold;
 background-color: #FF9600;
 padding: 20px;
}

nav.navigation ul li.btn:hover a{
 color: #FF9600;
 background-color: white;
 transition: 0.5s all;

}
nav.navigation ul li.btn{
 margin: 0 auto;
 padding: 50px;

}

nav.navigation ul li.btn a{
 position: 10px

}

EDIT : Ajout des balises de code (la coloration syntaxique). Explications disponibles ici : ICI Merci d'y penser dans tes prochains messages.