index.html
<!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">
<link rel="stylesheet" href="css/styles.css">
<title>Flexbox Navbar</title>
</head>
<body>
<div class="container">
<div class="nav-bar">
<p class="nav-bar-logo">
Logo
</p>
<ul class="nav-bar-contents">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
styles.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
* {
font-family: 'Poppins', sans-serif;
font-weight: 400;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav-bar {
display: flex;
justify-content: space-between;
}
.nav-bar-logo {
display: flex;
width: 40%;
padding: 1.5rem;
}
.nav-bar-contents {
display: flex;
width: 40%;
padding: 1.5rem 0;
justify-content: right;
list-style-type: none;
}
.nav-bar-contents li {
margin: 0rem 1.5rem;
}