title: HTML/CSS - img out of its li container
body: <p>I'm trying to create a menu and I've spent a few hours without finding a solution. I don't understand why my img (logo.png) don't stay in its li container. I've added borders to try to understand the problem. Found several same problems online but it didn't solve mine...
  Thank you for your help!</p>
  <p>EDIT: here is the img logo: <a href="https://i.stack.imgur.com/DIMR5.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>output:
  <img src="https://i.stack.imgur.com/CwXxd.png" alt="menu" /></p>
  <p>Here is how it should look like (less space on top and bottom of elements)
  <a href="https://i.stack.imgur.com/4fIU8.png" rel="nofollow noreferrer">good menu</a></p>
  <p>EDIT2: still stuck: no matter the way (flex, block, grid...) I can't get the logo img to be vertically centered in its li. Here is my last try with block and vertical align:
  <a href="https://jsfiddle.net/xpydsbjw/1/" rel="nofollow noreferrer">https://jsfiddle.net/xpydsbjw/1/</a></p>
  <h2>DEMO</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      box-sizing: border-box;
      margin: 0;
  }
  
  body {
      font-family: 'Open Sans';
      font-size: 14px;
      color: #333;
  }
  
  .container { /* règles générale de mise en forme des containers */
      
      margin-left: auto;
      margin-right: auto;
      padding-left: 15px;
      padding-right: 15px;
      width: 100%;
    
  }
  
  
  /*---------------------MENU------------------------------- */
  
  .menu &gt; div.container { /* couleur fond menu */
      background-color: #DD5555; 
  }
  
  
  
  .ElementsMenu{      /* la liste du menu */
      display: flex;
      align-items: center;
      gap:2rem;
      margin-left: 140px; 
      margin-right: 600px;
      border: 1px solid rgb(255, 255, 255);
      }
  
  
  .ElementsMenu &gt; li{ /* mise en forme des éléments du menu */
  
      display: block;
      height: 52px;
      line-height: 52px;
      list-style:none; /* supprime les puces */
      border: 1px solid rgb(0, 0, 0);
        
  }
  
  
  .logo &gt; img{
      vertical-align: middle;
      border: 1px solid rgb(172, 178, 15);
  }
  
  
  
  a{ /* Mise en forme de la police du menu */
      text-decoration : none; /* supprimer soulignage du texte menu */
      color: #FFFFFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
          &lt;div class="menu"&gt;
              &lt;div class="container"&gt;
                  &lt;nav&gt;
                      &lt;ul class="ElementsMenu"&gt;
                          &lt;li class="logo"&gt;&lt;img src="https://zupimages.net/up/22/20/d4q5.png"  alt="Logo"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;A propos&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Services&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;L'équipe&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>