space-evenly not working in my flexbox menu

I'm trying to get my menu to space out evenly. It seems to be stuck in the middle and not expanding into free space on either side.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>

    <style>

      .navMenu{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 7px;
        background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), black);        
      }

      .navMenu ul{
        list-style: none;
        background-color: blue;
        margin: 0;
        padding-left: 2%;
      }

      ul li{
        display: inline-block;
        position: relative;
      }

      ul li a{
        display: block;
        padding: 4px 1dvw;
        color: white;
        text-decoration: none;
        font-size: 1.1em;
      }

      ul li ul.dropdown li{
        display: block;
        padding: 8px;
      }

      ul li ul.dropdown{
        position: absolute;
        z-index: 999;
        display:none;
      }

      ul li a:hover{
        box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5);
      }

      ul li:hover ul.dropdown{
        display: flex;
        flex-direction: column;
        padding: 0;
      }
    </style>    

  </head>  

  <body>

    <nav class="navMenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Teams</a>
          <ul class="dropdown">
            <li><a href="#">Cubs</a></li>
            <li><a href="#">Braves</a></li>
          </ul>
        </li>
        <li><a href="#">Coaches</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Contact</a></li>
    </nav>

  </body>

</html>

I've tried space-evenly, space-around, space-between, etc. Nothing works as I think it should.

Solution

There are a couple of small problems in your code.

The first ul isn't closed explicitly but more importantly the flex is on the parent of the first ul (the navbar) rather than on the ul itself.

As it stands, the flex has only one item as a child and it centers it.

If you put the flex on the ul then it will have spece between its items.

<!DOCTYPE html>
<html lang="en">

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

  <style>
    .navMenu {
      padding: 7px;
      background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), black);
    }
    
    .navMenu ul {
      list-style: none;
      background-color: blue;
      margin: 0;
      padding-left: 2%;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
    }
    
    ul li {
      display: inline-block;
      position: relative;
    }
    
    ul li a {
      display: block;
      padding: 4px 1dvw;
      color: white;
      text-decoration: none;
      font-size: 1.1em;
    }
    
    ul li ul.dropdown li {
      display: block;
      padding: 8px;
    }
    
    ul li ul.dropdown {
      position: absolute;
      z-index: 999;
      display: none;
    }
    
    ul li a:hover {
      box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5);
    }
    
    ul li:hover ul.dropdown {
      display: flex;
      flex-direction: column;
      padding: 0;
    }
  </style>

</head>

<body>

  <nav class="navMenu">
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">Teams</a>
        <ul class="dropdown">
          <li><a href="#">Cubs</a></li>
          <li><a href="#">Braves</a></li>
        </ul>
      </li>
      <li><a href="#">Coaches</a></li>
      <li><a href="#">Videos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</body>

</html>

I guess you will want to sort out whether the linear gradient on the navbar is what you want seen as at the moment the ul covers it so the background is a plain blue.