Flex nav ul bar не центрируется на экранах 768 пикселей и меньше

Question

Я не понимаю, почему эта панель навигации ul ul не будет центрироваться на экранах меньшего размера.

Я предполагаю, что это как-то связано с пространством nav ul рядом с домом (и моим недостатком знания флекса). ).

Вот ручка, с помощью которой вы можете уменьшить окно и увидеть, что левое пространство рядом с домом не станет меньше и сделает горизонтальную панель навигации не центрированной.

#header-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  border: solid black;
  flex: 1;
  background-image: url(fresh-snow.png);
  background-color: #480459;
  color: white;
}

nav {
  border: solid;
  display: flex;
  flex: 4;
}

nav ul {
  border: solid;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  flex: 1;
  justify-content: space-evenly;
}

<div id="header-wrapper">
  <hgroup>
    <h1>Marina Heide</h1>
    <h2>Översättare</h2>
    <h3>från svenska, norska, danska till franska</h3>
  </hgroup>
  <nav>
    <ul class="navigation">
      <li><a href="#">home</a></li>
      <li><a href="#">kontakta mig</a></li>
      <li><a href="#">vem jag är</a></li>
    </ul>
  </nav>
</div>
<div id="main"> .
  <p>Jag översätter böcker, webbsidor, serier och filmer.
    <p>
</div>

https://codepen.io/cykelcykel/pen/eYYBMpq

Мне бы хотелось, чтобы навигационная панель центрировалась, когда для flex-direction установлено значение column.

Answer 1

Для элемента ul class navigation слева есть отступ в 40px. На большем экране эти 40 пикселей практически ничтожны. Так что кажется, что навигационная панель выровнена по центру. Но если вы присмотритесь, вы увидите, что навигационная панель немного с правой стороны. Добавьте приведенный ниже код для отмены левого отступа.

nav ul {
    border: solid;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style-type: none;
    flex: 1;
    justify-content: space-evenly;
    padding-left: 0;
}

Codepen: https://codepen.io/ashfaq_haq/pen/VwwmEdv

Answer 2

В @media only screen and (max-width: 768px) #header-wrapper необходимо добавить строку align-items: center;

Пример https://jsfiddle.net/6oaj2c3q/