Comment supprimer l'espace horizontal autour de ma liste d'images?

Question

Sur my website, j'ai eu un menu de format de liste en haut de l'écran. Je voulais placer une petite version de mon logo de l'entreprise dans le centre de ce menu, donc je viens d'ajouter un autre élément de la liste pour elle sur le test page:

<nav id="main-navigation" data-content-field="navigation-mainNav"> 
    <ul class="cf"> 
      <li class=""> 
       <a href="/">Home</a></li> 
      <li class=""> 
       <a href="/music/">Music</a></li> 
      <li class=""> 
       <img src="/assets/img/glutenfreeradio.png" style="width:20%;height:20%;" /></li> 
      <li class=""> 
       <a href="/reviews/">Reviews</a></li> 
      <li class=""> 
       <a href="/contact/">Contact</a></li> 
    </ul> 
</nav> 

Le problème est que, comme vous pouvez le voir en regardant les liens ci-dessus, un espace supplémentaire ridicule a été ajouté sur les côtés gauche et droit de l'image de la liste. Je ne veux définitivement pas ça. J'ai récuré le CSS et essayé de comprendre comment le changer soit directement, soit directement dans le HTML, mais je suis à court de ressources.

Answer 1

Les styles en ligne de l'image créent cet espace. Déplacez ceux-ci au parent et ajustez au besoin.

<nav id="main-navigation" data-content-field="navigation-mainNav"> 
    <ul class="cf"> 
      <li class=""> 
       <a href="/">Home</a></li> 
      <li class=""> 
       <a href="/music/">Music</a></li> 
      <li class="" style="width:20%;height:20%;"> 
       <img src="/assets/img/glutenfreeradio.png"/></li> 
      <li class=""> 
       <a href="/reviews/">Reviews</a></li> 
      <li class=""> 
       <a href="/contact/">Contact</a></li> 
    </ul> 
</nav>