My navbar won't center itself - html

Question

I am having a hard time getting my navbar to center. I want the entire navbar to be at the bottom of the screen always, and the logo to be in the very middle, and then two buttons on either side of it, spanning to the edges of the screen.
And here is the code I currently have:
.navigation {
font-size: 40px;
font-family: Roboto-Light;
color: black;
}
<nav class="navbar">
<div class="container">
<div class="navbar-nav nav-justified">
<a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
<a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
<a class="navigation foleyLogo nav-item nav-link" href="#">
<img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:200px;" />
</a>
<a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
<a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
</div>
<!-- navbar-nav -->
</div>
<!-- Container -->
</nav>
<!-- Navbar -->
I was under the impression that with the new boostrap 4, using nav-justified or nav-fill would do the job for me, just like in the instructional videos

Answer 1

Bootstrap 4 has built in utilities you can use.
<div class="navbar-nav mx-auto">
...
</div>
The class mx-auto for example adds auto margin on the x-axis of the navbar-nav, which should center the items.
.navigation {
font-size: 15px;
font-family: Roboto-Light;
color: black;
}
.navbar-nav {
width: 100%;
display: flex;
justify-content: space-around;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-xl ">
<div class="container">
<div class="navbar-nav mx-auto">
<a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
<a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
<a class="navigation foleyLogo nav-item nav-link" href="#">
<img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:100px;" />
</a>
<a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
<a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
</div>
<!-- navbar-nav -->
</div>
<!-- Container -->
</nav>

Answer 2

Found the answer with some help from #Brian !
I added a {flex-grow: 3} to his solution, which helped with the spacing.
Then, I declared the size of the logo image and made it an inline-block element, and made the entire navbar-nav the same line-height as the picture.
Solution code is below: (Font-size and image-size are scaled to fit here)
.navigation {
font-size: 15px;
font-family: Roboto-Light;
color: black;
}
.navbar-nav {
width: 100%;
display: flex;
justify-content: space-around;
}
.navbar-nav a:nth-of-type(1) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(2) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(3) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(4) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(5) {
flex-grow: 3;
}
img.foleyPerformance {
display: inline-block;
width: 100px;
}
.navbar-nav .nav-link {
padding-top: 0;
padding-bottom: 0;
height: 100px;
line-height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-toggleable-xl">
<div class="container" style="margin-left:50px; margin-right:50px; width:100%;">
<div class="navbar-nav mx-auto">
<a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
<a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
<a class="navigation foleyLogo nav-item nav-link" href="#">
<img class="foleyPerformance" src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" />
</a>
<a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
<a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
</div>
<!-- navbar-nav -->
</div>
<!-- Container -->
</nav>
<!-- Navbar -->