Quote Originariamente inviata da ninja72 Visualizza il messaggio
Non so se è quello che volevi ottenere, prova a vedere.
codice:
<!DOCTYPE html>
<html lang="it-IT">

<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>Document</title>
    <style>
        :root {
            --white: #fff;
            --menu-bc: #2e9bac;
            --link-hover: #1f6383;
            --link-active: #7e9faa;
            --desktop-bc: #E8E4E4;
        }

        * {
            padding: 0;
            margin: 0;
        }

        #header {
            background-color: var(--white);
            width: 100%;
            height: 100px;
            display: flex;
        }

        #container {
            display: flex;
        }

        #logo {
            background-color: var(--menu-bc);
        }

        #logo img {
            height: 100px;
            width: 220px;
        }

        #menu {
            display: flex;
            align-items: flex-end;
            width: 100%;
            background-color: var(--menu-bc);
        }

        #menu_lat_sx {
            background-color: var(--menu-bc);
            min-width: 200px;
            height: calc(100vh - 120px);
            padding: 10px;
        }

        #desktop {
            background-color: var(--desktop-bc);
            width: 100%;
            min-height: 100%;
            padding: 10px;
        }

        /* menu */
        ul {
            display: flex;
            justify-content: end;
            width: 100%;
            height: 25px;
            list-style-type: none;
            background-color: var(--menu-bc);
        }

        li a {
            display: block;
            color: var(--white);
            text-align: right;
            padding: 3px 5px;
            text-decoration: none;
        }

        li a:hover {
            background-color: var(--link-hover);
        }

        li a:active {
            background-color: var(--link-active);
        }

        li {
            border-right: 1px solid var(--white);
            border-left: 1px solid var(--white);
        }

        li:last-child {
            border-right: 0;
        }
    </style>
</head>


<body>
    <div id="header">
        <div id="logo">
            <img src="images/01.jpg" alt="logo">
        </div>
        <div id="menu">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#news">News</a></li>
                <li><a href="#about">Noi</a></li>
                <li><a href="#contact">Contatti</a></li>
            </ul>
        </div>
    </div>
    <div id="container">
        <div id="menu_lat_sx">
            <a href="#Noi">Noi</a>
            <a href="#News">News</a>
            <a href="#Contatti">Contatti</a>
        </div>
        <div id="desktop">
            <a href="#desktop">desktop</a>
        </div>
    </div>
</body>

</html>

diciamo di si, nel senso che prima come menu avevo una riga di colore "blu" con sfondo bianco, alla quale avrei aggiunto altre righe di altri colori, invece ora ho uno sfondo "blu"ovunque
e poi il menu su Chrome si vede a destra e magicamente su safari si sposta a sinistra