Single Price Grid Component

Hi there!

I see that you're most concerned about the positioning of elements. Well here are some tips that I believe will be handy: You can center the entire card like this:

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

One huge mistake that you've made is by not setting every element's box sizing to border-box. You should do this:

*, *::before, *::after {
    box-sizing: border-box;
}

/* The * is used to select every element */

You also said that you couldn't position the elements properly. There is a very simple solution to your problem. Instead of using positioning, you should use padding and margins. for your .benefits-section and your button, instead of positioning, use margins and padding. Something like this:

.benefits-section {
   margin: 1rem auto;
   /* Maybe some padding here if needed */
}

button {
   max-width: 250px; 
   margin: 1rem auto; 
   /* Specifying an explicit width and then setting the left and right margins
        to auto allows you to automatically center an element. The 1rem is for 
        top and bottom margins.*/
}

You can tweak the above values as you prefer.

All in all, I think all your problems with positioning the elements can be solved using margins and padding. You don't need to use positioning because it makes the code complicated and difficult to understand. I hope I could help and If you have any other questions, don't hesitate to ask.