Eu tenho um logotipo, como mostrado abaixo.

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="container-fluid">
    <img class="navbar-brand" src="logo.png" alt="logo">
    <ul class="nav navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">START</a></li>
      ...
    </ul>
  </div>
</nav>

O Bootstrap adiciona um preenchimento à esquerda, resultando no seguinte deslocamento da borda.

Como nosso logotipo é um círculo cortado, queremos que ele seja colocado precisamente na borda para criar a ilusão de um círculo real, mas permanecendo fora do navegador. Tentei definir uma margem negativa no lado esquerdo, mas ele apenas moveu a imagem, mantendo a borda estranha, como mostrado abaixo.

<img class="navbar-brand" src="logo.png" alt="logo" style="margin-left: 0px;">

O que posso fazer sobre isso?