I think the problem is with you css. Please try this css. Set overflow-x and overflow-y properties for .item class.

.menu-wrapper {
    position: relative;
    max-width: 1240px;
    height: 300px;
    margin: 1em auto;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
}

.menu {
    height: 200px; 
    background: #f3f3f3;
    box-sizing: border-box;

    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.item {
    display: inline-block;
    width: 200px;
    height: 100%;
    outline: 1px dotted gray;
    padding: 1em;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}

kindly add overflow-x: hidden; and overflow-y: hidden; to your .item class also and let it be there with .menu also.

.menu-wrapper {
    position: relative;
    max-width: 1240px;
    height: 300px;
    margin: 1em auto;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
}

.menu {
    height: 200px; 
    background: #f3f3f3;
    box-sizing: border-box;

    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.item {
    display: inline-block;
    width: 200px;
    height: 100%;
    outline: 1px dotted gray;
    padding: 1em;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}

<div class="menu-wrapper">
  <ul class="menu">
    <li class="item"><img src="https://vignette.wikia.nocookie.net/pswgb/images/2/20/Kneesocks5.JPG/revision/latest/top-crop/width/300/height/300?cb=20110121210606" height="120" width="140"></li><!--
 --><li class="item"><img src="https://66.media.tumblr.com/35136a17400c84a472a0cda0caabf593/81d7a175f1957001-df/s640x960/c117f8d8c4d81d21774d26d6a19e634f12b05163.jpg" height="100" width="100"></li><!--
 --><li class="item">3</li><!--
 --><li class="item">4</li><!--
 --><li class="item">5</li><!--
 --><li class="item">6</li><!--
 --><li class="item">7</li><!--
 --><li class="item">8</li><!--
 --><li class="item">9</li><!--
 --><li class="item">10</li><!--
 --><li class="item">11</li><!--
 --><li class="item">12</li>
  </ul>

Hoping it will help you!!
Regards,
Om Chaudhary

Right now I am playing around with the horizontal scrolling. I did a test run with a basic one with numbers and it worked fine. I then adjusted heights and widths, and once again it worked fine. Now I am trying to include images into the boxes for a new test run, but something has gone wrong, it seems that the boxes are now falling down and are leaving space at the top of the container. Is there anyway to fix this?

Context:
Main HTML Code:

<div class="menu-wrapper">
  <ul class="menu">
    <li class="item"><img src="https://vignette.wikia.nocookie.net/pswgb/images/2/20/Kneesocks5.JPG/revision/latest/top-crop/width/300/height/300?cb=20110121210606" height="120" width="140"></li><!--
 --><li class="item"><img src="https://66.media.tumblr.com/35136a17400c84a472a0cda0caabf593/81d7a175f1957001-df/s640x960/c117f8d8c4d81d21774d26d6a19e634f12b05163.jpg" height="100" width="100"></li><!--
 --><li class="item">3</li><!--
 --><li class="item">4</li><!--
 --><li class="item">5</li><!--
 --><li class="item">6</li><!--
 --><li class="item">7</li><!--
 --><li class="item">8</li><!--
 --><li class="item">9</li><!--
 --><li class="item">10</li><!--
 --><li class="item">11</li><!--
 --><li class="item">12</li>
  </ul>

CSS:

.menu-wrapper {
  position: relative;
  max-width: 1240px;
  height: 150px; // hide the scroll bar
  margin: 1em auto;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: hidden;
}

.menu {
  height: 200px; // hide the scroll bar
  background: #f3f3f3;
  box-sizing: border-box;

  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  .item {
    display: inline-block;
    width: 200px;
    height: 100%;
    outline: 1px dotted gray;
    padding: 1em;
    box-sizing: border-box;
  }
}

Full Project: https://codepen.io/Aidan_Monner/pen/PoZzBXK

Here’s an image (Yes I used Kneesocks to try it out):
The Issue I have!