moving text

<style>
        /* Reset default margin and padding */
        * {
          margin: 0;
          padding: 0;
        }
  
        /* Style the navigation bar */
        nav {
          background-color: #333;
          color: #fff;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
        }
  
        /* Style the moving text */
        .moving-text {
          position: relative;
          top: 0;
          left: 0;
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
        }
  
        .moving-text span {
          display: inline-block;
          padding-left: 100%;
          animation: marquee 10s linear infinite;
        }
  
        /* Define the animation */
        @keyframes marquee {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(-100%);
          }
        }
      </style>
      

    <nav>
        <div class="logo"></div>
        <div class="moving-text">
          <span>The sixth round of the championship will take place on May 15th.</span>
        </div>
      </nav>
  </body>
</html>