If your not use bootstrap please use normal HTML div structure.
Here i added some new div structure without bootstrap
<header>
<div class="container">
<div class="clearfix">
<div class="logo-div">
<a href="#"><img alt="logo" class="image" src="https://via.placeholder.com/350x150"></a>
</div>
<div class="menu-div">
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a class="active" href="#">Log in</a></li>
<li><a class="button" href="#">Sign up</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
And i added and removed some css please use the full css below
body {
margin: 0;
padding: 0;
font-family: open sans;
background-image: linear-gradient(to bottom right, #FBFCFD, #E8EBF3);
}
header {
padding: 25px;
}
nav {
margin: 0;
padding: 0;
text-align: center;
}
nav a {
display: block;
text-decoration: none;
color: #6A6A6A;
padding: 0 25px 0 25px;
}
nav a:hover {
color: #6945FF;
}
nav li {
font-size: 15px;
display: inline-block;
list-style-type: none;
}
.image {
position: relative;
display: inline;
height: 3rem;
}
.active {
color: #6945FF;
text-decoration: bold;
font-weight: 600;
}
.button {
font-weight: 400;
color: white;
padding: 7px 20px 7px 20px;
background: #6945FF;
border-color: transparent;
border-radius: 50px;
display: inline-flex;
justify-content: center;
border: 1px solid transparent;
padding: 0.375rem 1rem;
font-size: 1rem;
line-height: 1.5;
min-width: 5rem;
transition: all 0.1s ease-in-out;
}
.button:hover {
color: white;
box-shadow: 2px 2px 2px #888888;
}
.hero {
padding: 240px;
text-align: center;
font-size: 35px;
}
footer {
padding: 30px;
text-align: center;
font-size: 35px;
}
.logo-div{
float:left;
}
.menu-div{
float:right;
}
.container{
max-width:1140px;
width:100%;
margin:0 auto;
}
.clearfix{
display:inline-block;
width:100%;
}
If add the above HTML and css code means you will get the logo and menu in single line.In responsive view you need to reduce space for menu to keep in single line.In mobile view You need to add jquery for menu toggle.