.menu-wrapper {
  position: relative; /* Required for arrow keys to be absolutely positioned child divs inside menu-wrapper parent. */
  width: 100%;
   
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  
}

ul {
  list-style: none; /* Hide unordered list bullet. */
}

.menu {
  
  /* background: #f3f3f3; */
  box-sizing: border-box;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  position: relative; /* Required for animation. */
  display: flex;
  align-items: center;
   
}

 

.arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  /* width: 3em; Excluding width means that arrow div will only be as wide as it needs to be to contain the < or > characters. */
}

.left-arrow {
  left: 0;
}

.right-arrow {
  right: 0;
}

.hidden {
  display: none;
}

.print {
  margin: auto;
  max-width: 500px;
}

.print span {
  display: inline-block;
  width: 100px;
}