html5 - Why has my ul element disappeared when I utilize the float: right propriety in CSS? -

why ul element disappear when utilize float: right property in css?

i building navigation website.

you find code here in codepen:

https://codepen.io/maximo890/pen/jygevr

css

/*-----------------------------------*/ /* header */ /*-----------------------------------*/  header {     background-color: #de654e; }  .logo-link h1 {     font-family: "lobster", sans-serif;     font-size: 42px;     padding: 2% 0 2% 6%;     display: inline-block;     }  .menu-navigation li {     display: inline-block;     float: right;     color: #fff; } 

i suggest use flex property as possible it's future in works great responsive behaviour. current see in header have logo on left , navigation on right , html like:

<header>         <nav>              <a href="#" class="logo-link"><h1>creative</h1></a>             <ul><li>... 

so can try this:

nav {  display: flex; justify-content: space-between; }