List items with separation but without margin and padding

Question

I'm trying to cover the top of my site with list items.

My list items are appearing like this:

And i don't know why this separation between them. They don't have any margin and padding.

Anyone knows why is this?

HTML:

        <ul class="listras-lista">
            <li class="listras-lista_item"></li>
            <li class="listras-lista_item"></li>
            <li class="listras-lista_item"></li>
            <li class="listras-lista_item"></li>
            <li class="listras-lista_item"></li>
            <li class="listras-lista_item"></li>
        </ul>

CSS:

.listras-lista {
  list-style: none;
  width: 100%;
}
.listras-lista_item {
  display: inline-block;
  background: #CC00CC;
  width: 20%;
  height: 5px;
  padding: 0;
}

Answer 1

It's whitespace that causes the spaces. If you can, change the markup so that </li><li> are together

Answer 2

This is caused by display: inline-block;. Change it to float:left;.