I want my picture to be a little bit wider and the whole div as well, tailwind

How can I make this card div wider, what's causing the problem, and the image as well?

https://imgur.com/a/yyuOfj4

 <div class="grid md:grid-cols-3 gap-2 w-full mx-auto mt-11 text-gray-700">
            <div class="md:col-span-1 ml-20">
                <div class="sm:px-0 h-full bg-contain bg-no-repeat bg-center" style="background-image: url('/images/Expert.png')"></div>
            </div>
            <div class="ml-28 mb-12">
                <div class="md:col-span-2 bg-white py-8 px-20">
                    <h2 class="mb-5 text-center">Appropriate therapy for your problem</h2>
                    <div class="flex flex-col md:flex-row md:max-w-xl rounded-lg bg-white shadow-lg">
                        <img class="w-full h-96 md:h-auto object-cover rounded-t-lg md:rounded-none md:rounded-l-lg" style="background-image: url('/images/Sikavica.jpg')" alt="" />
                        <div class="p-6 flex flex-col justify-start">
                            <div class="text-gray-700 text-base mb-4"
                                v-for="(therapy, id) in therapies" :key="id" :value="id">
                                <h4>{{ therapy.symptom }}:</h4>
                                <p v-for="th in therapy.therapies">{{th.therapy}}</p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>