<div id="container">
  <div class="content">Some content</div>
  <div id="wide-div"><img src="http://via.placeholder.com/1920x1190" alt=""></div>
  <div class="content">
    <p>Some additional content</p>
    <p><a href="https://www.sitepoint.com/community/t/full-width-div-full-width-responsive-image-causing-horizontal-scroll/291107?u=sama74">https://www.sitepoint.com/community/t/full-width-div-full-width-responsive-image-causing-horizontal-scroll/291107?u=sama74</a></p>
  </div>
</div>

html, body {
  margin: 0;
  padding: 0;
}

div {
  min-height: 40px;
  box-sizing: border-box;
}

/*.#container {
  width: 400px;
  border: 1px solid red;
  margin: 0 auto;
}*/

.content {
  border: 2px solid black;
  max-width: 400px;
  margin: 0 auto;
}

#wide-div {
  /*width: 100vw;
  margin-left: calc(-50vw + 50%);*/
  border: 2px solid green;
}

img {
  max-width: 100%;
  height: auto;
}