Элементы заголовка li не будут совмещаться рядом

Question

Я пытаюсь выровнять элементы li в заголовке бок о бок. Однако, когда я определяю ul & li с встроенным дисплеем & left float То, что я пытаюсь достичь, не возникает, если элементы li все еще сложены вертикально, а не бок о бок горизонтально?

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    margin: 0; 
 
    list-style: none; 
 
    text-decoration: none; 
 
    font-size: 1em; 
 
    font-family: Helvetica Neue, Helvetica,Arial,Sans-serif; 
 
} 
 
a { 
 
    background: transparent; 
 
    border: none; 
 
    letter-spacing: 0.15em; 
 
    text-transform: uppercase; 
 
    transition: .3s color; 
 
    transition: .3s height; 
 
} 
 
header { 
 
    display: block; 
 
    position: fixed; 
 
    height: 80px; 
 
    width: 100%; 
 
} 
 
.header-wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: transparent; 
 
} 
 
.header-bg, 
 
.header-content { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.header-bg { 
 
    color: gray; 
 
    background: white; 
 
    border-bottom: 1px solid black; 
 
    transition: .3s height; 
 
    height: 0; 
 
} 
 
.header-content { 
 
    transition: .3s color; 
 
    color: white; 
 
    background: transparent; 
 
    height: 80px; 
 
    transition: .3s height; 
 
    overflow: hidden; 
 
    list-style: none; 
 
} 
 
ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
} 
 
li { 
 
display: inline-block; 
 
float:left; 
 
} 
 
.navBarLinks { 
 
    color: inherit; 
 
    cursor: pointer; 
 
    font-size: .8em; 
 
    letter-spacing: 0.05em; 
 
    transition: .3s color; 
 
} 
 
content { 
 
    display: block; 
 
    height: 2000px; 
 
    background: orange; 
 
} 
 
.stage { 
 
    color: #fff; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    background: white; 
 
    border-bottom: 1px solid black; 
 
    font-size: 48px; 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 
.stage-0 { 
 
    background: grey; 
 
    height: 400px; 
 
}

<header> 
 
    <div class="header-wrapper"> 
 
    <div class="header-bg"></div> 
 
    <div class="header-content"> 
 
     <ul id="horizontal-list"> 
 
     <li class="instagram"> <a href="" class="navBarLinks">Social Icon</a></li> 
 
     <li class="home"><a href="" class="navBarLinks">Logo </a></li> 
 
     <li class="hamburger"><a href="" class="navBarLinks">Hamburger</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</header> 
 
<content> 
 
<div class="stage stage-0">1</div> 
 
<div class="stage stage-2">3</div> 
 
<div class="stage stage-4">5</div> 
 
<div class="stage stage-6">7</div> 
 
<div class="stage stage-8">9</div> 
 
<div class="stage stage-10">11</div> 
 
<div class="stage stage-12">13</div> 
 
<div class="stage stage-14">15</div> 
 
<div class="stage stage-16">17</div> 
 
<div class="stage stage-18">19</div> 
 
<div class="stage stage-20">21</div> 
 
<div class="stage stage-22">23</div> 
 
</content>

Answer 1

ваш список элементов стека вертикально из-за этого:

* { 
    margin: 0; 
    padding: 0; 
    width: 100%; /*right here*/ 
    margin: 0; 
    list-style: none; 
    text-decoration: none; 
    font-size: 1em; 
    font-family: Helvetica Neue, Helvetica,Arial,Sans-serif; 
} 

Каждый элемент списка - everything for that matter - имеет ширину 100%, поэтому они вынуждены складывать. Может быть более разумным рассмотреть вопрос о размещении width:100%; в классе или некоторых других средствах для целевых элементов. * обычно используется для абсолютного сброса стилей по умолчанию.