You are having max-width: 500px property applied to container, iframe( 540px) and content section, so it extended to reach it’s max width on smaller screens. This is the matter of responsive. So change the max-with to 100% when the screen is smaller than 500px:

@media screen and ( max-width : 500px ) {
  #content {
    max-width: 100%
  }
}

Next, the width of the ‘#content’ element is still exceed the view width because your box-sizing property by default is content-box which mean the width is 100% + padding + border px . Change it to border-box instead, then the final CSS should be:

@media screen and ( max-width : 500px ) {
  #content {
    max-width: 100%;
    box-sizing: border-box;
  }
}

I have built a simple page and embedded a couple of Instagram posts.

https://bjoernschefzyk.co

The problem was, that in 100% of cases the Insta widgets increased the width of the container div, which introduces horizontal scrolling on mobile. I partly solved this by putting the Insta code in a div with width: 300px;, however on Chrome on Android and for some reason also the LinkedIn in-app browser on iOS, that doesn’t work consistently. The problem seems to be that the Instagram widget renders wider initially, then gets resized, but at that point the container div is already wider.

Here an example of how the issue looks like:

Any ideas how I can fix this?