<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>