Tell us what’s happening:
Hi, I am struggling with the header in the Product Landing Page Module. I am trying to make my header look similar to the demo so that the logo (logo image and logo title) is fixed in the upper left corner and the nav bar is fixed in the upper right corner. But my logo is not cooperating. I’ll attach my code below: https://codepen.io/Shukri-Isse/pen/WbNKZvr
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div class="logo">
<img
id="header-img"
src="https://live.staticflickr.com/65535/54409194665_932224f716_z.jpg"
alt="Guitar logo made by Parker Foote at Noun Project"
>
<h3 id="header-logo">Original Guitars</h3>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#guitars">Guitars</a></li>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#about">About</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="guitars"></section>
<section id="features"></section>
<section id="about"></section>
<section id="contact"></section>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: Garamond, serif;
}
.logo {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
/* margin-left: 30px; */
float: left;
background-color: #eee;
}
#header-img {
width: 51px;
height: 100px;
background-color: #eee;
}
#nav-bar ul {
list-style-type: none;
/* background-color: #eee; */
display: flex;
flex-direction: row;
justify-content: space-around;
/* gap: 1rem; */
}
#nav-bar li {
float: left;
padding: 14px;
}
#nav-bar li a {
display: block;
text-align: center;
color: #000;
text-decoration: none;
}
header {
/* clear: both;
overflow: auto; */
background-color: #eee;
display: flex;
justify-content: space-around;
align-items: center;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15
Challenge Information:
Product Landing Page - Build a Product Landing Page