How to get div to align and stay put? - html

Question

When I toggle the menu icon on my nav bar in mobile view, I can't get the 'work' and 'contact' links to align under the name and stay put. I'm targeting the .topnav.responsive #nav-bar ul in media queries which seems to be moving it, but can't figure out what properties to use to make it align under the 'name' when the menu icon is toggled on.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
.topnav {
overflow: hidden;
position: fixed;
width: 100%;
z-index: 5;
padding-top: 20px;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 16px;
line-height: 19px;
text-decoration: none;
font-size: 18px;
}
.topnav .icon {
display: none;
}
ul {
margin:0;
padding-top: -80;
}
#nav-bar {
float: right;
}
.nav-link a {
list-style-type: none;
text-decoration: none;
color: black;
}
#nav-bar li {
display: inline-block;
margin-right: 20px;
line-height: 80px;
margin-top: -2px;
}
#work {
margin-right: -5px;
}
#media screen and (max-width: 500px) {
#nav-bar ul {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-right: 10px;
margin-top: -2px;
}
}
#media screen and (max-width: 500px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0px;
top: 20px;
}
.topnav.responsive #nav-bar ul {
float: left;
display: block;
position: relative;
right: 300px;
top: 20px;
text-align: left;
padding-left: 20px;
}
.topnav a {
padding:20px;
}
#nav-bar li {
display:block;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
NAME
<div id="nav-bar">
<ul>
<li style="list-style-type: none;" class="nav-link"><a id="work" href="#">WORK</a></li>
<li style="list-style-type: none;" class="nav-link">CONTACT</li>
</ul>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

Answer 1

Don't use floats they're just a bit difficult to control, use flex instead.
I've made a few changes removed some unnecessary code to keep it simple and understandable.
I won't explain what every property is doing that'll take all night, i'm pretty sure you're familiar with most, However if you have any questions please do ask.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.topnav {
overflow: hidden;
position: fixed;
width: 100%;
z-index: 5;
display: flex;
}
.topnav a {
display: block;
color: black;
text-align: center;
padding: 16px;
line-height: 19px;
text-decoration: none;
font-size: 18px;
}
.topnav .icon {
display: none;
}
ul {
display: flex;
margin-left: auto;
}
#media screen and (max-width: 500px) {
.topnav>ul {
display: none;
}
.topnav a.icon {
display: block;
position: absolute;
right: 0;
}
.topnav.responsive {
flex-direction: column;
align-items: flex-start;
}
.topnav.responsive>ul {
display: flex;
flex-direction: column;
margin: 0;
}
.topnav a {
text-align: left;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
NAME
<ul>
<li style="list-style-type: none;" class="nav-link"><a id="work" href="#">WORK</a></li>
<li style="list-style-type: none;" class="nav-link">CONTACT</li>
</ul>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>