Learning simple navigation with flex

Simple Navigation_1 _-_ HTML_and_Basic Formatting

<div id="app">
 <nav id="single-nav" class="single-nav menu" role="navigation">
 <ul>
  <li><a>Start</a></li>
  <li><a>Essen</a></li>
  <li><a>Seminare</a></li>
  <li><a>Rezepte</a></li>
  <li><a>News</a></li>
  <li><a>Uber</a></li>
  <li><a>Kontakt</a></li>
 </ul> 
</nav></div>


.menu-section{
padding-bottom: 2em;
margin-bottom:2em;
}
.menu ul{
list-style-type: none;
padding: 0;
margin:0;
background: hsl(0,0%, 15%)
}
.menu li a{
display:block;
text-decoration:none;
color:white;
padding: .6em 1em;
}
.menu li a:hover,
.menu li a:focus{
background:hsl(0,0%, 25%)
}
@media screen and (min-width: 30em){
.single-nav ul{
display:flex; 
}
}