Why can't I change flex items size?

Here is my code

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

header nav ul {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  height: 3em;
  background-color: #783F27;
}

.naviga {
  border: solid medium;
  border-radius: 0.4em;
  margin: 0 0.5em;
  width: 10em;
  color: goldenrod;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Learning</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a class="naviga" href="">Menu</a></li>
        <li><a class="naviga" href="">News</a></li>
        <li><a class="naviga" href="">About</a></li>
        <li><a class="naviga" href="">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

The <li> elements display with a width of min-content (or max-content that is the same in this case) even if I specify width: 10em. The same thing happens if I specify the height. Why is this?

Solution

You should change the width of li instead of a tag please see the example below

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
    box-sizing: border-box;
}
* {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

header nav ul {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
    height: 3em;
    background-color: #783F27;
}
.naviga {
    color: goldenrod;
}
.liClass {
    border: solid goldenrod;
    border-radius: 0.4em;
    margin: 0 0.5em;
    width: 20em;
}
</style>
</head>

<body>

<header>
  <nav>
    <ul>
      <li class="liClass"><a class="naviga" href="">Menu</a></li>
      <li class="liClass"><a class="naviga" href="">News</a></li>
      <li class="liClass"><a class="naviga" href="">About</a></li>
      <li class="liClass"><a class="naviga" href="">Contact</a></li>
    </ul>
  </nav>
</header>

</body>

</html>