How to set the brand logo in Bootstrap 4 navbar to the left edge?

Question

I have a logo as shown below.

<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>

Bootstrap adds a piece of padding on the left resulting in the following offset from the edge.

Since our logo is a cut off circle, we want it to be placed precisely at the edge to create illusion of a real circle but sticking outside of the browser. I've tried to set a negative margin on the left side but it only moved the image, still retaining the weird edge as shown below.

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

What can I do about it?

Answer 1

You can use row instead of container-fluid. these two have opposite margins.

https://jsfiddle.net/gsb3ohd2/

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="row">
    <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>

Answer 2

Remove the left padding of .navbar-brand and .container-fluid.navbar-container(you don't want to override the styles of .container-fluid, so add a new class to it).

HTML

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="container-fluid navbar-container">
    <img class="navbar-brand" src="logo.png" alt="logo">
  </div>
</nav>

CSS

.container-fluid.navbar-container, .navbar-brand {
  padding-left: 0;
}

Working fiddle: https://jsfiddle.net/9t20dmLk/1/