I running into issues with creating my header section for the FreeCodeCamp product landing page project. I want to have the logo-img to be on the left side of the website and the navbar links to be evenly space between each other in a row on the right side of the website.
I tried fixing this issue by creating a flex box and etc. but can’t seem to get what I want. I was wondering if someone with more experience can help me out by explaining what I am doing wrong with my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@900&display=swap" rel="stylesheet">
<title>Rebel Product Landing Page</title>
</head>
<body>
<header id="header">
<img src="./images/rebel01.png" alt="Rebel Streetwear clothing logo" class="logo" id="header-img" loading="lazy"
width="200" />
<nav id="nav-bar">
<ul>
<li class="nav-link"><a href="#about-us"></a>About us</li>
<li class="nav-link"><a href="#contact-us"></a>Contact us</li>
<li class="nav-link"><a href="#collections"></a>Collections</li>
</ul>
</nav>
</header>
<main class="homepage">
<section class="hero-section"></section>
<section class="main-content"></section>
<footer class="footer"></footer>
</main>
</body>
</html>
:root{
--light-pink: #f2e3e6;
--mild-pink: #ed83b5;
--dark-pink: #ec297b;
--yellow: #fff486;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: var(--mild-pink);
}
header{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
position: fixed;
top: 0;
background-color: var(--light-pink);
border-bottom: 5px solid var(--yellow);
width: 100%;
}
#nav-bar{
align-items: end;
justify-content: space-between;
flex-direction: row-reverse;
color: var(--dark-pink);
font-family: "League Spartan", sans-serif;
font-weight: 600;
font-style: normal;
font-optical-sizing: auto;
}
#nav-bar li{
list-style: none;
}
#nav-bar a{
display: block;
padding: 10px 30px;
cursor: pointer;
font-size: large;
transition: text-indent .3s ease-in-out;
}
New contributor
Richard Hocking is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.