How do i cut an image in half so that it is not seen and that there is no horizontal scrolling?

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 "cut in half". 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?

import React from "react";  import illustrationWorking from "../images/illustration-working.svg"    const Hero = () => {      return (            <section className={'hero'}>              <div className={'container'}>                  <h1>More than just shorter links</h1>                  <div className="row">                      <div className="col">                          <p>Build your brand's recognition and get detailed insights on how your links are performing.</p>                          <button variant="info">Get Started</button>{' '}                      </div>                      <div className="col">                          <img                              className="illustration"                              loading={'lazy'}                              src={illustrationWorking}                              alt={'Illustration Working'}                          />                      </div>                  </div>                  </div>          </section>          )    }  export default Hero;  

https://stackoverflow.com/questions/67030366/how-do-i-cut-an-image-in-half-so-that-it-is-not-seen-and-that-there-is-no-horizo April 10, 2021 at 10:46AM