HTML/CSS - SOlVE Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruit website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body style="background-color:lightslategray;">
    <header>
 <nav>
    <div class="logo">
        <img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/fruit-logo-design-template-7e683dfd73ca0b9689c4e78f4efce998_screen.jpg?ts=1638214676" height="55">
    </div>
    <ul>
        <li><a href="#Home">HOME</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#products">OUR PRODUCTS</a></li>
        <li><a href="#Services">SERVICES</a></li>
        <li><a href="#Signin">SIGN IN</a></li>
    </ul>
    <div class="search">
        <i class="fa-solid fa-magnifying-glass"></i>
        <i class="fa-solid fa-cart-shopping"></i> 

css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
html {
    scroll-behavior: smooth;
}
nav {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    right: 0;
    background: #fde4e4;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
nav.logo img {
    width: 150px;
    cursor: pointer;
    margin-top: 8px;
}

BROWSER

Console