Hey there! I've been working on recreating a website to improve my skills, and I'm currently focused on replicating the navigation bar of this site:
I'm facing an issue with aligning the left line in the nav bar. Instead of being on the same line, they seem to overlap each other. The left part aligns perfectly, but the right side is giving me some trouble.
After spending hours each day for the past month learning CSS, I'm starting to feel frustrated that I still can't get a simple navbar done right.
Below are snippets of my HTML and CSS:
* {
list-style: none;
background-color: black;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
color: rgb(221, 213, 213);
margin: 0;
padding: 0;
}
.arte-logo {
height: 45px;
margin: 0;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-left ul {
display: flex;
}
.nav-right ul {
display: flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documentaires et reportages</title>
<link rel="stylesheet" href="style.css" />
<link
rel="icon"
href="/Users/jeandizian/Documents/Code/space/Arte/Assets/imgs/arte-icon.png"
/>
</head>
<body>
<nav>
<div class="nav-left">
<ul>
<li>
<img
class="arte-logo"
src="/Users/jeandizian/Documents/Code/space/Arte/Assets/imgs/arte-logo.png"
alt="arte logo"
;
/>
</li>
<li><span>☷</span></li>
<li>Guide TV</li>
<li>Direct</li>
<li>Bientôt en ligne</li>
<li>Arte Concert</li>
</ul>
</div>
<div class="nav-right">
<ul>
<li><span>☸</span></li>
<li><span>⊕</span></li>
<div class="connecter">
<li><span>⚉</span></li>
<li>Se connecter</li>
</div>
<li>ARTE en 6 langues</li>
</ul>
</div>
</nav>
</body>
</html>