Probleme mit marqueejs

Hallo, ich habe versucht, marquee.js in eine Website einzubauen. Hier ist ein Beispiel zu sehen: https://codepen.io/anon/pen/KROLzG In manchen Fällen (hängt wohl von der Bildschirmauflösung ab) verschwindet der Text auf der linken Seite zu früh. Also er slidet nicht komplett durch. Wie lässt sich dieses Problem lösen? Über Hilfe wäre ich gerade unglaublich dankbar.
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<html> <head> <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"> <style> .marquee { width: 100vw; height:calc(100vh / 8); font-size:2em; font-family: 'Press Start 2P'; } a{ text-decoration: none; } hr{ border:2px; height:2px; background-color: black; width: 100vw; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script> <div class="marquee"> <a href="index.html">Nice day</a> </div> <hr> <div class="marquee"> <a href="index.html">I love pizza</a> </div> <hr> <div class="marquee"> <a href="index.html">I love beer</a> </div> <hr> <div class="marquee"> <a href="index.html">I love you</a> </div> <hr> <div class="marquee"> <a href="index.html">And I hate nothing</a> </div> <hr> <div class="marquee"> <a href="index.html">I am so cool</a> </div> <hr> <div class="marquee"> <a href="index.html">So nice</a> </div> <hr> <div class="marquee"> <a href="index.html">So nice</a> </div> <script> $('.marquee').marquee({ }); </script> </body> </html>