title: How do you position an image such that it is partially off the screen without causing a horizontal scroll bar to appear?
body: <p>Fiddle here: <a href="https://jsfiddle.net/bu08sjar/1/" rel="nofollow noreferrer">https://jsfiddle.net/bu08sjar/1/</a></p>
  <p>I have a page in which I want to absolute position an image (some fancy shape) such that it is partially off the screen but doing so causes a horizontal scroll bar to appear (especially when dragging around the viewport size in Chrome dev tools).</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div class=&quot;container&quot;&gt;
            &lt;img class=&quot;some-svg&quot; src=&quot;https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/poi.svg&quot; /&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.container {
    background-color: lightblue;
    height: 90vh;
  }
  
  .some-svg {
    transform: scale(0.2);
    position: absolute;
    right: -450px;
  }
  </code></pre>
  <p>I've tried <code>overflow-x: hidden</code> on the container but that does not appear to fix it. How do I structure my HTML/CSS in such a way that the images/shapes can sit partially off the screen while not causing the horizontal scroll bar to appear (essentially causing an increased width of the container)?</p>