Oi Matheus,

Esse espaço é causado por espaços no seu HTML. Se você faz o código indentado (o que é bom) infelizmente vai sofrer com isso.

Existem várias soluções para isso, vou te apresentar algumas.

Solução 1

A solução mais simples é deixar seu código todo inline, dessa maneira

<style>
li {
  background-color: yellow; /* apenas para efeitos visuais */
  list-style-type: none;
  display: inline;
}
</style>

<ul>
  <li>item 01</li><li>item 02</li><li>item 03</li><li>item 04</li>
</ul>

Assim os espaços vão desaparecer. Porém isso traz uma série de problemas!

Seu código fica difícil de ler, difícil de entender, difícil de modificar, difícil de dar manutenção e difícil de melhorar.

Imagine dar manutenção em um código que está todo em uma linha só!

Solução 2

A segunda solução é setar o font-size do elemento pai para zero e controlar o font-size do elemento em si manualmente.

<style>
  ul {
    font-size: 0;
  }

  li {
    background-color: yellow; /* apenas para efeitos visuais */
    list-style-type: none;
    display: inline;
    font-size: 15px;
  }
</style>

<ul>
  <li>item 01</li>
  <li>item 02</li>
  <li>item 03</li>
  <li>item 04</li>
</ul>

Solução 3

Nessa terceira solução, basta setar um margin-left negativo de 4px (pode mudar dependendo do font-size do elemento pai, e também tem alguns bugs nos IE's da vida)

<style>  
  li {
    background-color: yellow; /* apenas para efeitos visuais */
    list-style-type: none;
    display: inline;
    margin-left: -4px;
  }
</style>

<ul>
  <li>item 01</li>
  <li>item 02</li>
  <li>item 03</li>
  <li>item 04</li>
</ul>

Solução 4

A quarta solução é simplesmente flutuar os elementos para a esquerda ou direita, assim eles perdem este espaçamento. Porém, isso nem sempre é a melhor solução, pois as vezes você não deseja ter um menu flutuado a esquerda ou a direita, não é mesmo?

<style>
  ul {
    overflow: hidden; /* apenas para evitar o height 0 causado pelo float */
  }

  li {
    background-color: yellow; /* apenas para efeitos visuais */
    list-style-type: none;
    display: inline;
    float: left;
  }
</style>

<ul>
  <li>item 01</li>
  <li>item 02</li>
  <li>item 03</li>
  <li>item 04</li>
</ul>

Solução 5

Quinta e última solução, é usar flexbox!

<style>
  ul {
    display: flex; 
  }

  li {
    background-color: yellow; /* apenas para efeitos visuais */
    list-style-type: none;
  }
</style>

<ul>
  <li>item 01</li>
  <li>item 02</li>
  <li>item 03</li>
  <li>item 04</li>
</ul>

Na minha opinião pessoal essa é a melhor solução, porém o flex não é 100% aceito pelos browsers, então cabe a você decidir se vai dar suporte a todos os navegadores ou não.