How to prevent scrollbar horizontally from displaying?

I was asked to do a task that is: Copy and align the same text besides (left and right) on hover

I’m facing an issue that is scrollbar is showing horizontally. I want to get rid of this. How can I fix this? Here is my code:

<div className="flex gap-x-10 w-auto h-auto text-primary font-bebas-neue text-5xl tablet:text-16xl laptop:text-20xl leading-10 cursor-pointer">
   <div onMouseEnter={() => setShowMQfor("cNd")}>
      <span>Devopssss</span>
   </div>
   {showMQfor === "cNd" && (
   <div>
      <span className="text-white">Devopsss</span>
      <span onMouseLeave={() => setShowMQfor("")}>Devopssss</span>
      <span className="text-white">Devopsss</span>
   </div>
   )}
</div>
{showMQfor === "cNd" && (
<Marquee gradient={false}>
   <ul className="flex gap-x-5 text-base tablet:text-5xl laptop:text-6xl font-bebas-neue uppercase opacity-60">
      <li>Lorem Ipsum</li>
      <li>&bull;</li>
      <li>Lorem Ipsum</li>
      <li>&bull;</li>
      <li>Lorem Ipsum</li>
      <li>&bull;</li>
   </ul>
</Marquee>
)}

---

Note: In addition, the text DEVOPSSSS right now placed three times hard coded. I want something dynamically, i mean calculate based on the screen width size and the text size. Don’t have any clue how to achieve this goal. If anyone could help this problem to solve.