How to layout the menu correctly?

Question

Layout

Interested in the main question. How to make it so that when deleting or replacing the logo, the menu does not move out.
Need like this:
My code:
HTML

header.header
  div.container
    nav.navbar
      ul.navbar__menu
        li.navbar-item: a(href="#") ABOUT ME
        li.navbar-item: a(href="#") PORTFOLIO
        li.navbar-item.logo: a(href="#") JD
        li.navbar-item: a(href="#") MY BLOG
        li.navbar-item: a(href="#") CONTACT ME

css

.navbar {

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../img/logo/logo-bg.png") no-repeat;
    width: 302px;
    height: 302px;
    margin-top: 15px;
    & a {
      font-family: @sea-font;
      font-size: 188px;
      line-height: 166px;
      text-transform: uppercase;
      letter-spacing: 0.94px;
      color: #f6edd8;
    }
  }
  &__menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  &-item {
    margin-top: -15px;
    & a {
      font-family: @bazar-font;
      font-size: 54px;
      line-height: 22px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      color: @menu-color;
    }
  }
}

Answer 1

https://jsfiddle.net/ngz93vre/8/ like this, probably ...
correct the font and gaps