Building a copy of website for practice

hey so basically i have just started coding and was wondering how would i push the apple logo off the side of the page and have even spacing just like the other text and logos?

Your code so far

<!-- file: index.html -->

<DOCTYPE html>
  <html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="">
    <script src="" crossorigin="anonymous"></script>


<i class="fa-brands fa-apple" style="color:E4E4E4"></i>

<li><a href="#Store">Store</a></li>
<li><a href="#Mac">Mac</a></li>
<li><a href="#IPad">IPad</a></li>
<li><a href="#IPhone">IPhone</a></li>
<li><a href="#Watch">Watch</a></li>
<li><a href="#Vision">Vision</a></li>
<li><a href="#AirPods">AirPods</a></li>
<li><a href="#Tv&Home">Tv&Home</a></li>
<li><a href="#Entertainment">Entertainment</a></li>
<li><a href="#Accessories">Accessories</a></li>

<i class="fa-solid fa-magnifying-glass" style="color:E4E4E4"></i>

<i class="fa-solid fa-bag-shopping" style="color:E4E4E4"></i>

<div class="box"></div>


<img class="image1" src="">


/* file: styles.css */

  position: absolute;
padding: 4vw 100vw;
backdrop-filter:blur(20px) brightness(30%);
z-index: -1;

nav {
font-size: 10px;
margin: 0;
padding: 0;


nav > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-block: 0;

nav > ul > li {
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;

nav > ul > li:hover{
  cursor: pointer;

li > a {
  color: #E4E4E4;
  text-decoration: none;

li > a:hover {
  color: #E4E4E4;
  text-decoration: none;

   position: fixed;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
align-items: center;


  width: 100%;
  height: 150%;

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

  • you can use “margin-left” in “icon” element
  • or you could use padding within its “container” element


happy coding :slight_smile:

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