Navigation menu with flexbox

Question

When I create a list li navigation nav, the elements align without spacing and remain next to each other with padding-right = 0.
That list is nestled in a header who owns display:flex to organize two elements h1 and the navigation list nav.

It is possible to create anchor spacing a or items from a list li using flexbox ?
How do I align the title h1 on the left and the list on the right with spacing between links a of the list li ?

header {
 width: 100%;
 height: 55px;
 display: flex;
 justify-content:space-between;
 border: 1px solid #000;
}

ul {
 display: flex;
 justify-content:space-between;
}

li {
 flex-grow: 1;
}

<header>
  <h1><a href="#">Museu Nacional</a></h1>
	<nav>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3 is longer</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
  </nav>
</header>  

Answer 1

You must add the property Justify-content: space-between; so that the flexbox can perform the spacing between the elements.

ul {
  display: flex;
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: space-between;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Answer 2

Before I begin my answer, down I leave two (2) links which refer to matters pertinent to your question. By reading them calmly and by training you will be able to rise to a higher level.

1) FLEXBOX (COMPLETE GUIDE)

2) METHODS WELL (CSS STANDARDS)

Before reading my answer I need you to read the contents (1) above! If you have read it, we can continue... Now I will explain what it is Flex Container, Flex items and what I did in style definition (CSS) and in the text markup (HTML), come on?

What is a Flex Container?

Is a tag that involves (is father) of flex items and when indicating the attribute display: flex this determined tag becomes a Flex Container.

Observing: Following the WELL methodology of CSS standards the Flex Container is created within a class .container, .d-flex among others.

What are Flex Items?

Without further ado, it is the children of Flex Container, that is, the flex items are after opening and before closing the tag of Flex Container.

How Our Styles Definition (CSS) and Text Markup (HTML5) Works)?

<nav> and <ul>: São Flex Container

<div> and <li>: São Flex Items

<div “container d-flex”> // DIV 1
    <div><h1>Sou filho e Iten Flex da DIV 1 e irmão da DIV 3</h1></div> 
    <div><h2> Sou filho e Iten Flex da DIV 1 e irmão da DIV 2</h2></div> 
</div>

Just below follows what you needed, remembering that I’m not following any good practices, methodologies among others. It’s just for learning.

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
}

div:first-child {
  flex-grow: 0;
  background-color:green
}

div:last-child {
  flex-grow: 1;
  background-color:orange
}

ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-right: 4px;
  padding-left: 10px;
}

a {
  color: white;
}

<header>
  <nav>
    <div>
      <h1><a href="#">Museu Nacional</a></h1>
    </div>
    <div>
      <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3 is longer</a></li>
        <li><a href="#">Page 4</a></li>
      </ul>
    </div>
  </nav>
</header>