How to set brand logo in Bootstrap 4 navbar on 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> 

The bootstrap adds some indentation to the left, which leads to the next offset from the edge.

Since our logo is a cut circle, we want it to be located exactly on the edge to create the illusion of a real circle, but staying out of the browser. I tried to set a negative margin on the left side, but it only moved the image while maintaining a weird edge, as shown below.

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

What can i do with this?

Answer 1

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

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 complement .navbar-brand and .container-fluid.navbar-container (you do not 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 script: https://jsfiddle.net/9t20dmLk/1/