PHP/MYSQL News Ticker not showing results in one line

i want to make a news ticker for my website where users can read the last 5 news but when i put the whole code i get the 5 results but in a different way... all 5 results should be like 1 - 2 - 3 - 4 - 5. i attached php & css codes with a output screenshot. Here is my php code

$sql = "SELECT * FROM sub_news ORDER BY id DESC LIMIT 5 OFFSET 1";  
$resultnews = mysqli_query($con, $sql);  
if(mysqli_num_rows($resultnews) > 0)  
                     {  
                         while($rownews = mysqli_fetch_array($resultnews))  
                          { 
                
 echo "<div class='hwrap'><div class='hmove'>
  <div class='hitem'><div class='breakingnews'>TOP NEWS</div> <a href=postinfo.php? 
id=".$rownews['id'].">".$rownews['title']."</a></div>
</div></div>";


                         }  
                     } 

Here is my CSS

@media only screen and (max-width: 768px) {
  .hmove { animation-duration: 10s; }
}
/* (A) FIXED WRAPPER */
.hwrap {
  white-space: pre; 
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  background: #FFF603;
  font-family: 'Vesper Libre', serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 10px;
}
 
/* (B) MOVING TICKER WRAPPER */
.hmove { display: flex; }

/* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
.hitem {
  flex-shrink: 10;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
.breakingnews {
  background-color: #dd0000; /* Green */
  font-family: 'Poppins', sans-serif;
  color: #FFF;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 3px;
}
/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
  0% { transform: translate3d(100%, 0, 0); }
  100% { transform: translate3d(-250%, 0, 0); }
}
.hmove { animation: tickerh linear 15s infinite; }
.hmove:hover { animation-play-state: paused; }

With the above code i get this result https://i.sstatic.net/q7hfU.png

and i want to show the last 5 news in one single scroll bar, please help me to get the result! thank you

You used all divs in while loop. I moved two line before and after while loop.

change

<div class='breakingnews'>TOP NEWS</div>

to

<span class='breakingnews'>TOP NEWS</span>

$sql        = "SELECT * FROM sub_news ORDER BY id DESC LIMIT 5 OFFSET 1";
$resultnews = mysqli_query($con, $sql);
if (mysqli_num_rows($resultnews) > 0) {
    echo "<div class='hwrap'><div class='hmove'><div class='hitem'>";
    while ($rownews = mysqli_fetch_array($resultnews)) {
        echo "<span class='breakingnews'>TOP NEWS</span>
              <a href=postinfo.php?id=" . $rownews['id'] . ">" . $rownews['title'] . "</a>";
    }
    echo "</div></div></div>";
} 

in css class delete this line white-space: pre;

.hwrap {
    white-space: pre; /* <<< */
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    background: #FFF603;
    font-family: 'Vesper Libre', serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 9px;
}

Example view