I have a code - <https://codepen.io/anon/pen/MQjpBG>

It's a simple list with a colored block and text in each li

I need the list to be vertical and the text and block to be vertically aligned.

I'm trying to do this with flex and align-items but the text and block never center exactly

Am I doing something wrong, is there a better way to do this.

```
.element{
  display: flex;
  list-style: none;

  &__item{
    display: flex;
    align-items: center;
    margin-right: 10px;

    &:last-of-type{
      margin-right: 0;
    }

    &-square{
      background: red;
      //display: block;
      display: inline-block;
      height: 20px;
      width: 20px;
    }

    &-text{
      font-weight: bold;
    }

  }

}

```

I want the block and text to fit like so.

[![enter image description here](https://i.stack.imgur.com/yhVpl.png)](https://i.stack.imgur.com/yhVpl.png)

The `align-items: center;` seems to do it but its slightly off, like 

[![enter image description here](https://i.stack.imgur.com/TecTd.png)](https://i.stack.imgur.com/TecTd.png)