title: flex align-items center is not centering
body: <p>I have a code - <a href="https://codepen.io/anon/pen/MQjpBG" rel="noreferrer">https://codepen.io/anon/pen/MQjpBG</a></p>
  
  <p>It's a simple list with a colored block and text in each li</p>
  
  <p>I need the list to be vertical and the text and block to be vertically aligned.</p>
  
  <p>I'm trying to do this with flex and align-items but the text and block never center exactly</p>
  
  <p>Am I doing something wrong, is there a better way to do this.</p>
  
  <pre><code>.element{
    display: flex;
    list-style: none;
  
    &amp;__item{
      display: flex;
      align-items: center;
      margin-right: 10px;
  
      &amp;:last-of-type{
        margin-right: 0;
      }
  
      &amp;-square{
        background: red;
        //display: block;
        display: inline-block;
        height: 20px;
        width: 20px;
      }
  
      &amp;-text{
        font-weight: bold;
      }
  
    }
  
  }
  </code></pre>
  
  <p>I want the block and text to fit like so.</p>
  
  <p><a href="https://i.stack.imgur.com/yhVpl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yhVpl.png" alt="enter image description here"></a></p>
  
  <p>The <code>align-items: center;</code> seems to do it but its slightly off, like </p>
  
  <p><a href="https://i.stack.imgur.com/TecTd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TecTd.png" alt="enter image description here"></a></p>