Bootstrap 4 flexbox navigation with centered logo and items either side - css

Question

I'm trying to create a simple bootstrap 4 navigation navbar with my logo centered and a fontawesome menu icon aligned to left and a button aligned to the right.
In my code I have created 3 columns (5, 2 and 5). It works fine if I remove the nav part, but within the nav, it collapses and doesn't take up the full width. I've read that it is because bootstrap 4 uses flex. I have tried adding the class w-100 to the row, which nearly works, but it then has a small padding on the right of the navigation which causes the logo to not be exactly centered.
<nav class="navbar bg-dark">
<div class="row">
<div class="col-5 text-left bg-warning">
<i class="fas fa-bars text-primary pointer" style="font-size: 28px;" ></i>
</div>
<div class="col-2 bg-success text-center">
Logo
</div>
<div class="col-5 text-right bg-info">
<a class="btn btn-primary" href="#" role="button">Sign Up</a>
</div>
</div>
Does anyone know how to get this to work using flex? I want to be able to possibly add another button or icon in the right column as well, but still have the logo exactly in the center of the screen.
************* UPDATE **************
I have now got it to work using flex, but I have had to add the style such as "flex: 1 0 40%;" to each of the 3 divs, 40% to the left and right div and 20% to the middle/logo div. The code doesn't look ideal but it does work.
<nav class="navbar bg-light">
<div class="d-flex w-100">
<div class="my-auto" style="flex: 1 0 40%;">
<i class="fas fa-bars text-primary pointer" style="font-size: 28px;" ></i>
</div>
<div class="text-center" style="flex: 1 0 20%;">
Logo
</div>
<div class="my-auto text-right" style="flex: 1 0 40%;">
<a class="btn btn-sm btn-watermelon" href="#" role="button">Sign Up</a>
</div>
</div>
</nav>

Answer 1

The .navbar class adds padding: .5rem 1rem; style rule to the nav element. The "Logo" text is not centered, because of the .navbar-brand class, that adds margin-right: 1rem; Adding content to a column does not change the size of it.
Add these classes to the elements:
<nav class="navbar bg-dark pr-0 pl-0">
...
Logo
...
</nav>
The class pl-0 and pr-0 will set the left and right paddings to 0, while m-0 will remove all margins.
Here is a very nice cheat-sheat for bootstrap 4

Answer 2

THis is it:
<div class="container">
<nav class="navbar bg-dark">
<a href="" data-toggle="modal" class="navbar-toggler" data-
target="#exampleModal"><i
class="fas fa-bars text-primary pointer btn btn-warning" style="font-
size: 28px;"></i></a>
Logo
<a class="btn btn-info" href="#" role="button">Sign Up</a>
</div>
check:https://jsfiddle.net/sugandhnikhil/gn89rj5p/