Как правильно сверстать меню?

Question

[greenfox07]

Интересует главный вопрос. Как сделать так, что бы при удалении или при замене логотипа, меню не съезжало.
Нужно вот так:

Мой код:

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/ вот так наверно ...
шрифт и зазоры поправите

Comments

[greenfox07]

то что надо, спасибо