Why is my page scrolling horizontally on mobile?

HTML-CSS
1

On small/mobile screens my page scrolls horizontally. It looks like the nav is overflowing the body.
Info from stackoverflow says it is due to the margin/padding on a child element causing the overrflow. Also, suggested was to set overflow: hidden. I tried that and set all margins and padding to 0, but it does not fix the problem. I can’t track down the issue.

@media only screen and (max-width: 768px) {
  body {
    margin: 0;
    padding: 0;
  }
  nav {
    overflow: hidden !important;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }
  #navbar-links {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  nav ul li {
    font-size: 1em;
    margin: 0;
    padding: 0;
    text-align: center;
  }
//continues with other mobile styling 
}
2

Are you sure the page scrolls horizontally? Based on the screenshot provided above it looks like it is moving vertically as it should. Can you share the HTML structure of your website?

3

Yep, 100% sure it was scrolling horizontally. I thought it was the navbar overflowing, but it was my images that were overflowing and causing the scroll. I resized my images in my media query and it fixed the scrolling issue.