https://i.sstatic.net/Kj99o.png https://i.sstatic.net/W1BQ8.png
Trying to align the two images shown above, but facing issues with making it responsive. The SVG image exceeds the container boundaries, causing horizontal scrolling. The goal is to have the image "cut in half", eliminate horizontal scroll, and remove any white space on the right side. Looking for suggestions on how to achieve this.
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;