<div class="main-container">
  <div class="container-button-left">
    <button id="left-button">left</button>
  </div>
<div class="scrollmenu" id="scroll-container">
  <a href="#">Lorem</a>
  <a href="#">Lorem 2</a>
  <a href="#">Lorem 3</a>
  <a href="#">Lore 4</a>
  <a href="#">Lorem 5</a>
  <a href="#">Lorem 6</a>
  <a href="#">Lorem 7</a>  
  <a href="#">Lorem 8</a>
  <a href="#">Lorem 9</a>
  <a href="#">Lorem 10</a>
  <a href="#">Lorem 11</a>
  <a href="#">Lorem 12</a>
  <a href="#">Lorem 13</a>
  <a href="#">Lorem 14</a>
  <a href="#">Lorem 15</a>
  <a href="#">Lorem 16</a>
  <a href="#">Lorem 17</a>
  <a href="#">Lorem 19</a>
  <a href="#">Lorem 20</a>
  <a href="#">Lorem 21</a>
  <a href="#">Lorem 22</a>
  <a href="#">Lorem 23</a>
  <a href="#">Lorem 24</a>
</div>  
  <div class="container-button-right">
    <button id="right-button">right</button>
  </div>
</div>


<h2>Horizontal  Menu</h2>
<p>Redimencionar window para ver el efecto</p>

.main-container{
  display: flex;
  flex: 1;
  background-color: pink;
}
.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

.scrollmenu a:hover {
    background-color: #777;
}

 document.addEventListener('DOMContentLoaded', function () {   
            var buttonR = document.getElementById('right-button');
            buttonR.onclick = function () {
                document.getElementById('scroll-container').scrollLeft += 20;
            };
   
   var buttonL = document.getElementById('left-button');
            buttonL.onclick = function () {
                document.getElementById('scroll-container').scrollLeft -= 20;
            };
        }, false);