body>
<header id="header">
<div class="container"></div>
<nav id="nav-bar">
<img src="https://www.logolynx.com/images/logolynx/fc/fc0b437ce037f257e4fff275a0a1025e.png" id="header-img">
<ul>
<li><a class=" nav-link"href="#home" class="active">
Home</a></li>
<li><a class="nav-link"href="#learn-more">Learn More</a></li>
<li><a class=" nav-link"href="#discount-coupon">Discount Coupon</a></li>
</ul>
</nav>
</header>
</div>
I’m try to put my navbar to the left of the logo while its using (the navbar) display flex currently it’s to the right of the logo.
body{
background-image: url(https://www.wallpapertip.com/wmimgs/219-2193017_dark-sky-background-png.png);
background-size: cover;
background-repeat: no-repeat;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
font-family: sans-serif;
}
a{
text-decoration: none;
color: #eee;
}
header{
width: 100%;
height: 100vh;
background-image: url(https://www.wallpapertip.com/wmimgs/219-2193017_dark-sky-background-png.png);
}
.container{
max-width: 120rem;
width: 90%;
margin: 0 auto;
}
nav{
padding-top: 5rem;
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.6rem;
background-image: url(https://www.wallpapertip.com/wmimgs/219-2193017_dark-sky-background-png.png);
width: 100%;
top: 0;
position: absolute;
}
img{
width: 20%;
margin-left: 550px;
}
nav ul{
display: flex;
}
nav ul li{
list-style: none;
}
nav ul li a{
padding: 1rem 0;
margin: 0 3rem;
position: relative;
letter-spacing: 2px;
}