News ticker without gap in pure CSS

<div class="ticker-container">
  <span class="ticker">
    <div class="ticker-item">Breaking news!</div>
    <div class="ticker-item">News Headline 1</div>
    <div class="ticker-item">News Headline 2</div>
    <div class="ticker-item">News Headline 3</div>
  </span>

  <!-- duplicate -->
  <span class="ticker">
    <div class="ticker-item">Breaking news!</div>
    <div class="ticker-item">News Headline 1</div>
    <div class="ticker-item">News Headline 2</div>
    <div class="ticker-item">News Headline 3</div>
  </span>
</div>

.ticker-container {
  width: 100%;
  overflow: hidden;
  background-color: black;
  display: inline-block;
  white-space: nowrap;
  font-size: 0;
  margin-top: 40%
}

.ticker {
  position: relative;
  display: inline-flex;
  justify-content:center;
  white-space: nowrap;
  animation-name: tick;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 10s;
  min-width:fit-content;
  width:100%;
}

.ticker-container:hover .ticker {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-block;
  padding: 0.5rem;
  margin: 0.5rem;
  color: white;
  font-weight: bold;
  font-size: initial;
}

@keyframes tick {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }

}

<div class="ticker-container">
  <span class="ticker">
    <div class="ticker-item">Breaking news!</div>
    <div class="ticker-item">News Headline 1</div>
    <div class="ticker-item">News Headline 2</div>
    <div class="ticker-item">News Headline 3</div>
  </span>
</div>

const ticker_container = document.querySelector(".ticker-container")
const ticker = ticker_container.querySelector(".ticker")
const duplicate_ticker = ticker.cloneNode(true)
ticker_container.append(duplicate_ticker)