How to center a Navbar that is 90% of the screen

Question

I want to center the navbar as a whole, not the contents of the nav bar.

This is the CSS and HTML for my navbar.

.navbar {
  border-radius: 10px 10px 30px 30px;
  background: #3CE18F;
  overflow: visible;
  position: fixed;
  bottom: 3%;
  width: 90%;
}

<nav class="navbar fixed-bottom navbar-light bg-light">
    <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

I've tried centering using css & using class names to center but it always seems to left align. I want it perfectly centered.

See attached image for what's going wrong.

As you can see the nav bar is forced left. I don't want to use padding as that can vary for different screen sizes.

Any help will be appreciated.

Answer 1

Wrap you nav inside a div and add property justify-content to align it horizonatally:

<div class="wrapper"><nav class="navbar fixed-bottom navbar-light bg-light">
    <a class="navbar-brand" href="#">Fixed bottom</a>
</nav></div>

.wrapper {
    display: flex;
    justify-content: center;
}