How can i mage my nav bar more even and how can i cut down on some code? (thank you for the formatting help)

My code and site

For some reason the text on the right of the nav bar is way closer to the middle than the one on the left and i also feel like most of the flex ive added is unnecessa

body {
    background-color: yellowgreen;
    color: black;
    padding: 0;
    margin: 0;
}

Header {
    background-color: palevioletred;
    display: flex;
    flex-direction: row;
    flex: 1 0 100%;
    list-style: none;
    text-align:center;
    width:100%;
}
ul{
    display:flex;
    flex-direction: row;
    flex:1 0 0;
} 
li{
    display:flex;
    flex-direction: row;
    flex:1 0 0;

    
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" href='style.css' type='text/css' <head>
</head>

<body>
    <header>
        <ul>
            <li><h2>main</h2> </li>
            <li><h2>main</h2> </li>
            <li><h1>Welcome</h1></li>
            <li><h2>main</h2> </li>
            <li><h2>main</h2> </li>
        </ul>
    </header>
</body>

ry, how can avoid that in the future ?

Solution

I can propose you this solution:

body{
  background-color: green;
  color: black;
  padding: 0;
  margin: 0;
}
header{
  background-color: pink;
  display: flex;
  flex-direction: row;
  flex: 1 0 100%;
  list-style: none;
  text-align: center;
  width: 100%;
}

ul{
  display: flex;
  flex-direction: row;
  flex: 1 0 0;
  padding: 0; /*ADD => remove space (tabulation) before <li> block*/
}

li{
  /*display: flex;
  flex-direction: row;*/ /*REMOVE*/
  flex: 1 0 0;
  list-style: none; /*REMOVE point before title*/
}

<body>
<header>
  <ul>
  <li><h2>main</h2></li>
  <li><h2>main</h2></li>  
  <li><h1>Welcome</h1></li>
  <li><h2>main</h2></li>
  <li><h2>main</h2></li>
  </ul>
</header>
</body>