I'm trying to get 4 circle images to display on the same line, with the final circle containing a single digit number. I have the following code which gets close, but the final circle gets bumped down a bit by having text. I do not understand why the circle gets bumped down.

Thanks for any help.

```css
.avatar {
  flex: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid #E2E8ED;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px 0 rgba(225, 232, 236, 0.7);
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  background: #FFF;
}
li:nth-child(n+2) { margin-left: -20px; }
```

```html
<ul>
  <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar">
      <span>3</span>
    </div>
  </li>
</ul>
```