How do I center my Navbar?

Question

I looked on here before, but nothing really worked. I am using Bulma Framework which I believe is relatively unheard of, yet I was hoping you could help me center the brand link on the navbar. This is what I have it at right now:

.navbar {
  background-color: #0a0a0a;
  color: white;
  height: 9%;
}

.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
  color: white;
  font-family: 'Wavehaus';
}

I have a link on Codepen so that it can be visualized:

https://codepen.io/anon/pen/BwrWwg

Note that the font will not show up.

Answer 1

You just need to set the right display for the navbar. Currently, Bulma makes use of Flex Layout. Now clearing the flex and making it use block will make it work:

.navbar .navbar-brand {
  text-align: center;
  display: block;
  width: 100%;
}

.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
  display: inline-block;
}