Problem z menu stworzonym w flexbox

0

Hej,

Proszę o pomoc. Jak zrobić za pomocą flexbox'a, żeby uzyskać taki efekt:
screenshot-20190630162006.png

Co mam aktualnie:
https://codepen.io/natazar/pen/wLyrRq
Problemy jakie mam to: Border swoją szerokość dopasowuje do długości elementów menu zamiast do tytułu strony. Nie potrafię zrobić wyśrodkowanego menu, tak żeby tekst nie nachodził na siebie i był ładnie wyśrodkowany.

@Edit udało mi się naprawić, żeby tekst nie nachodził na siebie i był wyśrodkowany. Wciąż mam problem z borderem, który się rozciąga razem z elementami menu zamiast logo.

2 
body, ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  flex-flow: column;
  padding: 4px;
  background: green;
  color: orange;
  width: 100%;
}

nav ul { /* disable this formula in different resolution */
  display: flex;
}

nav::before {
  content: "BUL";
  display: inline-block;
  color: green;
  border-top: 2px solid orange;
  border-bottom: 2px solid orange;
}

nav {
  text-align: center;
}

<html>
<body style="background: darkgoldenrod;">

<nav>
  <ul>
    <li>abc</li>
    <li>def</li>
    <li>ghi</li>
    <li>jkl</li>
    <li>mno</li>
  </ul>
</nav>
   
</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1