Как работает display:flex; ?

При попытке сделать "navbar"  я столкнулся с такой проблемой что в css не  изменяется  расположения. 

Как можно исправить? 

	<nav>
		<div class="logo">
			<h4>The Nav</h4>
		</div>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Work</a></li>
			<li><a href="#">Projects</a></li>
		</ul>

	</nav>
 CSS

	nav{
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 8vh;
	font-family: 'Poppins', sans-serif;
	background-color: #5D4954;
}