Объясните почему justify-content не работает

qwertyuserc

Justify-content: center не выравнивает по центру
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
<div class="flex-container">
  <ul>
    <li class="flex-element" >Home</li>
    <li class="flex-element" >About</li>
    <li class="flex-element" >Services</li>
    <li class="flex-element" >Portfolio</li>
    <li class="flex-element" >Test</li>
    <li class="flex-element" >Contact</li>
  </ul>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Nunito');
* {
  margin:0;
  font-family: 'Nunito', sans-serif;
}
body {  background: #0f0f0f;}
.flex-container {
  display: flex;
  height: 11vh;
  width: 100%;
  padding-top:7vh;
}
.flex-element {
  display: inline-flex;
  color:white;
  list-style:none;
  flex-direction: row;
  padding:5px;
  justify-content: center;
}
1 ответ

qwertyuserc

justify-content: center; разве не у родителя должен стоять?