<div class="marquee-horizontal2">     <div class="track-horizontal2">         <div class="marquee-text">Marquee</div>         <div class="marquee-text">Marquee</div>         <div class="marquee-text">Marquee</div>         <div class="marquee-text">Marquee</div>         <div class="marquee-text">Marquee</div>         <div class="marquee-text">Marquee</div>     </div> </div> 

.marquee-horizontal2 {   display: flex;   overflow: hidden;   width: 100%;   white-space: nowrap;   justify-content: flex-start;   -webkit-box-align: center;   align-items: center; }  .track-horizontal2 {   position: relative;   display: flex;   justify-content: flex-start;   align-items: center;   white-space: nowrap;   will-change: transform;   animation: marquee-horizontal 20s linear infinite; }  .marquee-text {   -webkit-text-size-adjust: 100%;   -webkit-box-direction: normal;   white-space: nowrap;   box-sizing: border-box;   padding-right: 0.3em;   padding-left: 0.3em;   -webkit-box-flex: 0;   flex: 0 0 auto;   font-family: 'Helvetica', sans-serif;   color: #1d4130;   font-size: 6.25em;   font-weight: 700;   text-transform: uppercase; }  @keyframes marquee-horizontal {   from {     transform: translateX(0);   }    to {     transform: translateX(-50%);   } }