Tell us what’s happening:
The header container has the image and unordered list within it and I have it set to flex-wrap: wrap but when the screen shrinks the list items won’t wrap below the image. What am I missing?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<header id="header">
<img id="header-img" src="https://www.pngkey.com/png/full/102-1024673_aperture-laboratories-logo.png">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="">Features</a></li>
<li><a class="nav-link" href="">How It Works</a></li>
<li><a class="nav-link" href="">Pricing</a></li>
</ul>
</nav>
</header>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
}
body {
background-color: #5c5c5c;
font-family: helvetica;
}
#header {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
#header-img {
max-width: 300px;
width: 60vw;
height: 100%;
}
#nav-bar {
font-weight: 300;
width: 40vw;
}
#nav-bar ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#nav-bar li {
list-style: none;
}
.nav-link {
text-decoration: none;
color: black;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: