Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Can anyone help me by telling me what I should do to push the nav to one side. I want my nav to be on the right side, but no matter what I do, it doesn’t go as plan.

   **Your code so far**

/* file: index.html */
<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="styles.css" /> 
   <title>Apple Product Landing Page</title>
   <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=Roboto+Condensed:ital,wght@1,300&display=swap" rel="stylesheet">
<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=Oswald:wght@200&display=swap" rel="stylesheet">
<link
     href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
     rel="stylesheet"
   />
   <link
     rel="stylesheet"
     href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
   />
   </head>

   <body>
     <main>

     <header id="header">
       
       <img id="header-img"src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="Apple Logo"
       width="150"
       height="150">

       <nav id="nav-bar">
         <h1 class="heading"> Apple Product</h1>
         <ul class="list">
           <li><a class="nav-link img1" href="#">Store</a></li>
           <li><a class="nav-link img2" href="#">Mac</a></li>
           <li><a class="nav-link img3" href="#">IPad</a></li>
           <li><a class="nav-link img4" href="#">IPhone</a></li>
           </ul>
         </nav> 

       </header>
<!--
       <section id="Store">
         <h1>Store</h1>
         <p>The best way to buy the products you love.
</p>
<div id="img-container1">
<img class="img-wrapper" src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/store-card-13-mac-nav-202203?wid=200&hei=130&fmt=png-alpha&.v=1645051958490" >
<img class="img-wrapper" src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/store-card-13-iphone-nav-202109_GEO_US?wid=200&hei=130&fmt=png-alpha&.v=1630706116000">
<img class="img-wrapper" src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/store-card-13-ipad-nav-202108?wid=200&hei=130&fmt=png-alpha&.v=1625783381000">
</div>
         </section>
-->
</main>
     </body>
 </html>

/* file: styles.css */
*,
::before,
::after {
 padding: 0;
 margin: 0;
 box-sizing: border-box; 
}


body {
 background-color: rgb(43, 54, 46);color: linen; 
}

h1 {
 font-size: 20px;
 font-family: 'Baskervville';
}

a {
 text-decoration: none;
 color: linen;
}

header {
 width: 100%;
 height: 60px;
 background-color: #1b1b32;
 display: flex;
}

#header-img {
 width: max(50px, 10vh);
 aspect-ratio: 35 / 4;
	padding: 0.4rem;
 margin-top: -45px;
}

.heading {
 font-size: min(5vw, 1.2em);
 text-align: center;
}

nav {
 width: 50%;
	max-width: 300px;
	height: 50px;
 float: right;
}

nav > ul {
 display: flex;
	justify-content: space-evenly;
 flex-wrap: wrap;
	align-items: center;
	padding-inline-start: 0;
	margin-block: 0;
 width: 100%;
}

nav > ul > li {
 color: #dfdfe2;
 margin: 0 0.2rem;
	padding: 0.2rem;
	display: block;
}

nav > ul > li:hover {
 background-color: #dfdfe2;
 color: #1b1b32;
 cursor: pointer;
}

li > a {
 color: inherit;
 text-decoration: none;
}














   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

The display: flex; is causing the issue.

3

Oh, then should I use grid instead?

4

Here you are using float: right; to push the nav to right corner - and this is not being applied. This may be because the float and flex are different things and float property is not getting applied in this case. Note the nav is the child element of the header in your html.

EDIT ADD:

You can try adding the following property for the header element, and remove the float: right from the nav.

justify-content: flex-end;

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.