Centering Bootstrap navbar - css

Question

I am new to css. I will like to center brand logo and also the links in the navbar.
HTML
<nav class="navbar navbar-expand-md center">
<a class="navbar-brand" href="http://www.dimsum.dk" target="_blank">
<img src={% static 'media/HIDDEN DIMSUM logo final.png'%} width="100" alt="">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Book Table</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.dimsumbox.dk" target="_blank">
Order Dimsum Box</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.dimsumshop.dk" target="_blank">
Order Takeaway</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">
About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">
Contact</a>
</li>
</ul>
</div>
</nav>
CSS
.navbar {
background: #d48498;
}
.nav-link {
color: black;
font-size: 24px;
font-weight: bold;
}
.navbar.center .nav-item {
text-align: center;
display: inline-block;
vertical-align: middle;
}
This is how the navbar looks right now
I want to have the logo centered and the links appearing in a new line also centered so it looks like
Logo
Link 1 Link 2 Link 3 Link 4
I have tried justify center in css but it doesn't work.

Answer 1

Add this bit to your css
#media (min-width: 768px) {
.navbar {
flex-flow: wrap;
}
.navbar-brand {
width: 100%;
text-align: center;
}
.navbar-brand img {
height: 50px; /*Set a logo size*/
width: auto;
}
.navbar-collapse {
justify-content: center;
}
}

Answer 2

use justify content: center and display: flex in css
display: flex;
justify-content: center;
for reference https://www.w3schools.com/cssref/css3_pr_justify-content.asp

Answer 3

add this css after bootstrap.css:
.navbar-brand {
display: flex;
width: 100%;
justify-content: center !important;
}
.navbar {
flex-wrap: wrap !important;
justify-content: center !important;
}
.navbar-nav{
width:100%;
justify-content:center !important
}