Бегущая строка-шапка

У меня на сайте есть шапка, в которой располагается меню. Я хотел превратить меню в бегущую строку.

<div class="top_header">


<table cellpadding="0" cellspacing="0" style="width: 98%;" align="center">
<tbody><tr>
<td align="left" valign="bottom">
<a href="./"><img src="./images/logo_new.png" border="0" alt=""></a>
</td>
  <td align="right" valign="bottom" style="padding-bottom: 10px;">
   <table cellpadding="0" cellspacing="0" style="width: 98%;" align="center">
    <tbody><tr>
      <td nowrap="nowrap" class="top_menu">
        <div class="top_menu_link_container">
          <div class="top_menu_link">
       <div class="top_menu_link_container">

@keyframes scroll {0% {transform: translate(0, 0)} 100% {transform: translate(-100%, 0)}}

.top_menu_link_container{
padding-left: 100%;
animation: scroll 15s infinite linear}

.top_menu {
width: 100%;
white-space: nowrap;
overflow: hidden;}

Однако ссылки встали в столбец вместо того, чтобы идти друг за другом. Добавление display: flex; flex-flow: row nowrap; в .top_menu частично решает проблему: столбец исчезает, однако в бегущей строке находится только одна ссылка. Как можно исправить это?

https://codepen.io/pen/qBZZRbX