I am trying to get the navigation to the center by the use of flexbox.

Question

As you can see on the picture the logo aka moneyflow takes up some space when I put margin-left:auto and margin-right: auto. I want the nav to be exactly at the center. Thanks for helping.

`header {
 grid-column: full-start/full-end;
 display: flex;
 background-color: var(--color-blue-dark);
 .logo {
    margin-left: 5rem;
    align-self: center;
    color: rgb(209, 197, 197);
    font-size: 2rem;
}
.nav {
    margin-left: auto;
    margin-right: auto;
    align-self: center;
}`

Answer 1

You could use flexbox for the navigation items and absolute positioning for the logo.

* {
  box-sizing: border-box;
}

img {
  display: block;
}

.container {
  background-color: black;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.logo {
  position: absolute;
  top: 0;
  left: 0
}

.menu {
  display: flex;
}

<nav>
  <div class="container">
    <div class="logo"><img src="https://via.placeholder.com/150x50">
    </div>
    <div class="menu">
      <img src="https://via.placeholder.com/50x50/00ff00">
      <img src="https://via.placeholder.com/50x50/ff0000">
      <img src="https://via.placeholder.com/50x50/0000ff">
    </div>
  </div>
</nav>