I am struggling to align the div "nav2" on the same line as "nav1", but it just won't move up. I've tried using float, but it's not working.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
#navbar {
position: fixed;
width: 100%;
display:
}
#navbar ul {
list-style: none;
}
#navbar ul li {
display: inline-block;
padding: 10px 5px 0px 20px;
}
#nav2 {
float: right;
}<div id="main">
<div id="navbar">
<div id="nav1">
<ul>
<li>How it works</li>
<li>Why Company?</li>
<li>Pricing</li>
<li>About us</li>
<li>Resource center</li>
</ul>
</div>
<div id="nav2">
<ul>
<li>Get started</li>
<li>Log in</li>
</ul>
</div>
</div>
<div id="head">
<div>
<h3>Company</h3>
</div>
<div>
<h1>Invert Like an idiot</h1>
</div>
<div>
<p>because money is lame</p>
</div>
</div>
</div>I'm hoping to have both "nav1" and "nav2" on the same line like a normal navbar, but I want "nav2" to be aligned to the right side, which is why I made it a separate div with the class "nav2".