percentage width behaving weirdly

const OurMission = () => {
    return (
        <section className="flex relative p-8">
            <div className='w-[60%]'>
            <h1>Learn more</h1>
            <h1><span>About our</span> Missions</h1>
            <span></span>
            <p>
                Buy One Gram is a Paltform or Service Provider Working with Farmers,
                Agro Industry, Exporters, Wholesaler, Big Stores, Mart, Grocery selling
                Online Platform To Increase Farmers Income, Direct Selling, Export from
                Farmers Field, Reduce Delivery Time, Transportaion Cost Etc.
                Provide farmers to a logging Pannal to get in touch with daily update's.
                Also Provide Demand, help to Sell Agro Products as Quality, after all buying
                procedure Shift to B1G Warehouse and Delivery to the Consumer Receive
                order and Demand from Exporter, Agro Industry, Store Etc.
                Make sure for payment safety, Quality assurance and On time Delivery with Safety.
                Through the use of technology connect the farmer and the end consumer at one single point.
                Thus providing a simple platform to benefit both. Own Buy One Gram Wholesale Application that 
                Provide all product to Shop or Mart We Directly connected to 20 Big Mart and 56 Small Outlet
            </p>
            </div>
            <div>
                <img className='h-full w-full object-cover object-center' src='farming.png' alt='Farming' loading='lazy'/>
            </div>
        </section>
    )
}

export default OurMission