align li item side by side

Question

"find me on" & "in" are stacking on top of each other where they should by aligned side by side.

How do I make classes: find & in display inline inside an li that also displays inline in the ul?

Help figuring this out would be greatly appreciated.

* {
    margin: 0;
    padding: 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 {
    position: fixed;
    height: 50px;
    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: 50px;
    transition: .3s height;
    overflow: hidden;
    list-style: none;
}
ul {
        width:100%;
}
li {
	padding-top: 15px;
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        margin-right:50px;
}
.navBarLinks {
    color: inherit;
    cursor: pointer;
    font-size: .8em;
    letter-spacing: 0.05em;
    transition: .3s color;
	padding-top: 15px;
    
}
.instagram{
	float:left;
	padding-left:50px;
	}
.hamburger {
	float:right;
	padding-right:50px;
	}
	.insticon {
    float:left;
    width: 25px;
    height: 25px;
    padding: 15px;
    cursor: pointer;
	fill: white;
    font-size:.8em;
    letter-spacing:0.05em;
	}
	li a {
		display: inline;
	}
	
	
	@media only screen and (max-width : 555px) {
		.find{
			display: none;
			}
	}

content {
    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>
        <li class="instagram"> 
        <a href="" class="navBarLinks find">Find me on</a>
        <a href="" class="navBarLinks in">
        <svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-227 325 155.2 144" style="enable-background:new -227 325 155.2 144;" xml:space="preserve">
<path style="" d="M-184.3,447.7h-21.4V379h21.4C-184.3,379-184.3,447.7-184.3,447.7z M-195,369.6
	c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C-182.6,364-188.1,369.6-195,369.6z M-104.3,447.7
	h-21.3v-33.4c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34h-21.4V379h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1
	c21.6,0,25.6,14.2,25.6,32.7C-104.3,410-104.3,447.7-104.3,447.7z"/>
<g>
	<path style="" d="M-75.1,445c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H-77v4h0.6V445h0.7l0,0l1.1,1.7h0.6L-75.1,445
		L-75.1,445z M-75.7,444.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C-74.6,444.5-75.1,444.6-75.7,444.6z"/>
	<path style="" d="M-75.7,441c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8s3.8-1.7,3.8-3.8
		C-71.8,442.6-73.5,441-75.7,441z M-75.7,448.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
		C-72.4,446.7-73.8,448.1-75.7,448.1z"/>
</g>
</svg>
</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

This can be done in multiple ways. Here I used line-height property.

give

.navBarLinks {
    line-height: 42px;
}

and

.insticon{
   padding: 5px 15px;
}

* {
    margin: 0;
    padding: 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 {
    position: fixed;
    height: 50px;
    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: 50px;
    transition: .3s height;
    overflow: hidden;
    list-style: none;
}
ul {
        width:100%;
}
li {
	padding-top: 15px;
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        margin-right:50px;
}
.navBarLinks {
    color: inherit;
    cursor: pointer;
    font-size: .8em;
    letter-spacing: 0.05em;
    transition: .3s color;
	padding-top: 15px;
    line-height: 42px;
    
}
.instagram{
	float:left;
	padding-left:50px;
	}
.hamburger {
	float:right;
	padding-right:50px;
	}
	.insticon {
    float:left;
    width: 25px;
    height: 25px;
    padding: 15px;
    cursor: pointer;
	fill: white;
    font-size:.8em;
    letter-spacing:0.05em;
	}
	li a {
		display: inline;
	}
	
	
	@media only screen and (max-width : 555px) {
		.find{
			display: none;
			}
	}

content {
    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;
}
.insticon{
   padding: 5px 15px;
}

<header>
  <div class="header-wrapper">
    <div class="header-bg"></div>
    <div class="header-content">
      <ul>
        <li class="instagram"> 
        <a href="" class="navBarLinks find">Find me on</a>
        <a href="" class="navBarLinks in">
        <svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-227 325 155.2 144" style="enable-background:new -227 325 155.2 144;" xml:space="preserve">
<path style="" d="M-184.3,447.7h-21.4V379h21.4C-184.3,379-184.3,447.7-184.3,447.7z M-195,369.6
	c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C-182.6,364-188.1,369.6-195,369.6z M-104.3,447.7
	h-21.3v-33.4c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34h-21.4V379h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1
	c21.6,0,25.6,14.2,25.6,32.7C-104.3,410-104.3,447.7-104.3,447.7z"/>
<g>
	<path style="" d="M-75.1,445c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H-77v4h0.6V445h0.7l0,0l1.1,1.7h0.6L-75.1,445
		L-75.1,445z M-75.7,444.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C-74.6,444.5-75.1,444.6-75.7,444.6z"/>
	<path style="" d="M-75.7,441c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8s3.8-1.7,3.8-3.8
		C-71.8,442.6-73.5,441-75.7,441z M-75.7,448.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
		C-72.4,446.7-73.8,448.1-75.7,448.1z"/>
</g>
</svg>
</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 2

One option is to set float: left on .navBarLinks.find as I have demonstrated below.

You'll need to adjust some other things though to get it nicely formatted. Feel free to read this on floats.

Or, you could set display: inline-block on the elements if you want to avoid using floats.

* {
    margin: 0;
    padding: 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 {
    position: fixed;
    height: 50px;
    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: 50px;
    transition: .3s height;
    overflow: hidden;
    list-style: none;
}
ul {
        width:100%;
}
li {
	padding-top: 15px;
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        margin-right:50px;
}
.navBarLinks {
    color: inherit;
    cursor: pointer;
    font-size: .8em;
    letter-spacing: 0.05em;
    transition: .3s color;
	padding-top: 15px;
    
}
.instagram{
	float:left;
	padding-left:50px;
	}
.hamburger {
	float:right;
	padding-right:50px;
	}
	.insticon {
    float:left;
    width: 25px;
    height: 25px;
    padding: 15px;
    cursor: pointer;
	fill: white;
    font-size:.8em;
    letter-spacing:0.05em;
	}
	li a {
		display: inline;
	}
	
	
	@media only screen and (max-width : 555px) {
		.find{
			display: none;
			}
	}

content {
    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;
}

.navBarLinks.find {
  float: left;
}

<header>
  <div class="header-wrapper">
    <div class="header-bg"></div>
    <div class="header-content">
      <ul>
        <li class="instagram"> 
        <a href="" class="navBarLinks find">Find me on</a>
        <a href="" class="navBarLinks in">
        <svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-227 325 155.2 144" style="enable-background:new -227 325 155.2 144;" xml:space="preserve">
<path style="" d="M-184.3,447.7h-21.4V379h21.4C-184.3,379-184.3,447.7-184.3,447.7z M-195,369.6
	c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C-182.6,364-188.1,369.6-195,369.6z M-104.3,447.7
	h-21.3v-33.4c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34h-21.4V379h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1
	c21.6,0,25.6,14.2,25.6,32.7C-104.3,410-104.3,447.7-104.3,447.7z"/>
<g>
	<path style="" d="M-75.1,445c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H-77v4h0.6V445h0.7l0,0l1.1,1.7h0.6L-75.1,445
		L-75.1,445z M-75.7,444.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C-74.6,444.5-75.1,444.6-75.7,444.6z"/>
	<path style="" d="M-75.7,441c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8s3.8-1.7,3.8-3.8
		C-71.8,442.6-73.5,441-75.7,441z M-75.7,448.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
		C-72.4,446.7-73.8,448.1-75.7,448.1z"/>
</g>
</svg>
</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>