Problem mit seitlicher Buttonleiste im responsive Design

[Zeppelin]

Hallo zusammen,

ich mach grade für nen Studikurs eine Seite und habe ein Problem mit einer seitlichen Leiste, die ich nutzen möchte um Social Media Buttons draufzupacken. Damit das ganze auf verschiedenen Auflösungen gut aussieht versuche ich das ganze mit "vh" und "vw" als Größenangaben zu lösen.

Wenn ich aber jetzt folgendes machen:

       #socialfloat { 

           background-color: #000000;
           position: fixed; 
           color: #ffffff;
           padding-left: -1vw;
           padding-top: -1vh;
           border-bottom-right-radius: 1em;
           border-top-right-radius: 1em;
           top: 40vh; 
           left: 0vw; 
           width: 4vw; 
           height: 20vh;}
        
        #socialfloat ul {
            margin-left: -1.8vw;
        }
        
        #socialfloat ul li {
           list-style-type: none;
           padding: 0.8vh;
            vertical-align: middle;
           text-align: left;
           text-decoration: none;
        }
        
        #facebook {
            width: 2vw;
            height: 4vh;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url(img/facebook.png)
        }
            #twitter {
            width: 2vw;
            height: 4vh;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url(img/twitter.png)
        }
            #insta {
            width: 2vw;
            height: 4vh;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url(img/insta.png)
        }
        

bzw.

  <div id="socialfloat">
    <ul>
    <li><a href="https://"><div id="facebook"></div></a></li>
        <li><a href="https://"><div id="insta"></div></a></li>
        <li><a href="https://"><div id="twitter"></div></a></li>
    </ul>
    
    </div>

Dann habe ich das Problem, dass im Objekt ein fixierter oberer und linker Rand für die Buttons sind, und sich die Buttons daran orientieren, also beim zusammenziehen des Fensters die Buttons nach rechts wandern, das Objekt aber wie gewollt nach links hin kleiner wird.

Jemand dazu eine Idee? Und sorry schonmal im Voraus, ich hab seit ca. 16 Jahren keinen Code mehr geschrieben 😂