I've been struggling to align the text within my id= "nav-bar" to the right of the header using float:right. Despite attempting options such as using float:left and absolute positioning for the logo on the left, I haven't been successful. Even after trying clearfix for the id=nav-bar, the issue persists. Does anyone have any suggestions on how I could resolve this problem? Your help would be greatly appreciated! Please refer to the code below.
<style>
html,body{
font-family: 'Open Sans',sans-serif;
text-align: center;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#page-wrapper {
position: relative;
}
#header {
position: fixed;
top: 0;
left: 0;
height: 125px;
}
.logo {
float: left;
}
#header-img {
height:100%;
}
nav {
position: relative;
float: right;
height: 10vh;
color:blue;
}
li {
display: inline-block;
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
</style>
<!DOCTYPE type>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="http://image.discountsoff.com/dryKPIu3fpLUjodbv1n2Q2EWdkA=/logos/aersf.com.png">
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#products">Products</a></li>
<li><a class="nav-link" href="#about us">About Us</a></li>
</ul>
</nav>
</header>
<div class="container">
<section id="features">
<div class="grid"></div>
<img class="lock feature" src="file:///F:/Coding/Product%20Landing%20Page/lock%20feature.svg" alt ="features"></img>
<div class="description"><h2>Lock Feature<h2><p>Aer started in 2014 as a crowdfunding project that combined a gym bag and an office bag into one simplified design. That project has grown into a mission to simplify the way you carry so you can worry less about what's on your back and focus more on what's ahead. Whether you're traveling between the office and the gym, or from San Francisco to Tokyo, there's a bag in our collection that's perfectly suited for your journey.</p></div>
<div class="icon-bag"></div>
<img class="zip feature" src="file:///F:/Coding/Product%20Landing%20Page/zip%20feature.svg" alt="full bag"></img>
<div class="description"><h2>Zip Feature</h2><p>The Active Collection is a line of modern gym/work bags designed for the city professional. Go from the office to the gym and everywhere in between.</p></div>
<div class="grid"></div>
<img class="lap top feature" src="file:///F:/Coding/Product%20Landing%20Page/lap%20top%20feature.svg" alt="about us"></img>
<div class="description"><h2>Lap Top Feature</h2><p>Inspired by the city, we create minimalist bags that balance smart features with a clean, architectural style.</p></div>
</section>
</div>
<div class="container">
<section id="products"></section>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qeFOYlHmyGE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="container">
<section id="about us"></section>
</div>
</div>
</body>
</html>