title: How do i cut an image in half so that it is not seen and that there is no horizontal scrolling?
body: <p><a href="https://i.stack.imgur.com/Kj99o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kj99o.png" alt="I am trying to make do a challenge and match this page exactly as i can " /></a>
  <a href="https://i.stack.imgur.com/W1BQ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W1BQ8.png" alt="The image on the bottom is my own page" /></a></p>
  <p>The image on the top is what i am trying to match. The image on the bottom is my own. I am having trouble making this responsive. The svg image goes out of the container which allows horizontal scrolling. It is supposed to be &quot;cut in half&quot;. There should be no horizontal scroll and there should be no white space on the white side. The part of the image should be hidden. Anyone have any ideas?</p>
  <pre><code>import React from &quot;react&quot;;
  import illustrationWorking from &quot;../images/illustration-working.svg&quot;
  
  const Hero = () =&gt; {
      return (
  
          &lt;section className={'hero'}&gt;
              &lt;div className={'container'}&gt;
                  &lt;h1&gt;More than just shorter links&lt;/h1&gt;
                  &lt;div className=&quot;row&quot;&gt;
                      &lt;div className=&quot;col&quot;&gt;
                          &lt;p&gt;Build your brand’s recognition and get detailed insights on how your links are performing.&lt;/p&gt;
                          &lt;button variant=&quot;info&quot;&gt;Get Started&lt;/button&gt;{' '}
                      &lt;/div&gt;
                      &lt;div className=&quot;col&quot;&gt;
                          &lt;img
                              className=&quot;illustration&quot;
                              loading={'lazy'}
                              src={illustrationWorking}
                              alt={'Illustration Working'}
                          /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
              &lt;/div&gt;
          &lt;/section&gt;
  
  
      )
  
  }
  export default Hero;
  </code></pre>