Replication of Order Summary Challenge using HTML and CSS.

Good job on your first Frontend Mentor submission! Here is some feedback...

• Concerning the positioning, there are a few ways to do it. You can format it like Reydel Ocon suggests using display: grid;, you can do a similar method using display: flex;, justify-content: center;, and align-items: center; which is what I do, or you can make the whole thing position: absolute; and use the transform: translate(-50%, -50%); method that you found. The reason for the transformation is because you are positioning the element relative to the top-left corner of it, so the -50% (or 50% if you use right and bottom instead of left and top) adjusts it to the actual center.
• I would avoid using sizing in pixels since they aren't as responsive. Use rem instead. There are online converters you can use, such as this one.
• While color names are easier, colors could be interpreted differently depending on the device. I would recommend using the colors in HSL format like the challenge gives you or RGB. The same goes for the hexadecimal colors.
• You box-shadow around the payment button should only be on the bottom side. This can be done by changing the 30px to a lower number or increasing 2px.

As for screen responsiveness, what of it are you struggling with? Do you not know how to do it? The best way to do it? I would be happy to help you if you reply.

in my case, I solved that using grid by setting the body to 100vw then display: grid; place-items: center; to the container

Great job on your first challenge other than the changes mentioned above! :)

Font family on the buttons are not the same also the shadow under button are not simmilar your colors also do not matching.

nice bro