Scroll is taking up two lines of text, is there a way to make it one continuous line?

Site URL: https://kale-clarinet-t64e.squarespace.com/

I injected an html code snippet and then styled it in css to scroll, everything is working perfectly except it's two lines of text instead of one continuous one, checkout the screenshot for reference. This is the code I used:

*I'm copying this website to practice my web design skills, so this is my desired look (7th section): https://www.vacation.inc/ *

HTML

<div class="scroll"> For full details including alternate means of entry see Official Rules — NO PURCHASE NECESSARY.Void where prohibited. Ends at 11:59:59 ET on 9/21/21. Open to legal residents of the U.S., 18+. </div> 

CSS

.scroll{
font-family: 'OptimaLTProItalic';
  color: #EBE6DC;
  overflow: hidden!important;
 position: relative!important;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 25s linear infinite;
 -webkit-animation: scroll 25s linear infinite;
  animation: scroll 25s linear infinite;}
@-moz-keyframes scroll {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}

@-webkit-keyframes scroll  {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}

#page {overflow-x:hidden}

Hi,

What is access password?