I understand what my issue is, I am just not entirely sure how to remedy it.
My desired look is the first picture, it looks this way with a 375 x 667 screen size. When changing to any other resolution it off sets. My second image is only with a slight change of 414 x 896 resolution.
I know this is because I am using absolute positioning, with top & left placements, I am just struggling to figure out how to make this responsive without doing custom top & left position for every screen size.

I am using Tailwind CSS and React

    return (
        <div>
            <img src={backdrop} alt="cover" className='relative mx-auto' />
            <div className='rounded-full size-28 flex items-center justify-center absolute left-6 top-48 border-2 border-groove-red '>
                <img src={profile} alt="profile" className='rounded-full size-24' />
            </div>
        </div>
    )

attempted to use flex, could not get images to overlap.