I'm trying to get the top-nav and bot-nav divisions to separate vertically by using justify-content: space-between. However, it isn't doing anything. Can someone point out what I'm doing wrong please?
@import url(https://fonts.googleapis.com/css?family=Rock+Salt); html { font-family: 'Rock Salt', cursive;}.flex-container { display: flex;}header { width: 300px; height: 100vh; position: fixed; background-color: blue;}nav.flex-container { align-items: center; flex-direction: column; justify-content: space-between;}ul { padding: 0; margin: 0; list-style-type: none;}#logo-container { background-color: red; width: 100%;}#logo { margin: auto; padding: 10px 0;}<body><div id="root-container"><header><div id="logo-container" class="flex-container"><h2 id="logo">Name Goes Here</h2></div><nav class="flex-container"><div class="top-nav"><ul><li>This is a list item</li><li>This is a list item</li></ul></div><div class="bot-nav"><ul><li>This is a list item</li><li>This is a list item</li></ul></div></nav></header></div></body>
