horizontal scroll menu

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#scrollmenu {
  margin: auto;
  width: 34em;
  height: 14em;
  background-color: #fff;
  border: 4px double black;
  border-radius: 15px 50px 30px 5px;
  overflow-y: hidden;
  overflow-x: auto;
  padding: 0.5em;
  white-space: nowrap;
}

#awa {
  display: inline-block;
  color: black;
  height: 12em;
  width: 12em;
  text-align: center;
  padding: 15px;
  border: 1.5px solid black;
  white-space: normal;
  overflow: auto;
  border-radius: 15px;
  text-decoration: none;
}

</style>
</head>

<div id="scrollmenu">
<div id="awa">
this scrolls horizontally! you can add more of these by adding div id="awa" if you wanna. adjust the appearance to suit your needs
</div>
<div id="awa">
example text
</div>
<div id="awa">
yeah
</div>
</div>