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.