You were pretty close to getting the radio inputs where you want them to be. To fix it all you need to do is take the flex-grow property off the label elements selection and for the .radios div add justify-content: space-between.
Essentially what was happening was that the flex-grow property was causing the radios to divide the horizontal space of their container evenly which will override the justify-content property on their container.
In general, flexbox is usually a great way to center things but it can be confusing to understand what the different properties do. This video was a great introduction to the topic for me: https://www.youtube.com/watch?v=tXIhdp5R7sc
I was not sure which unit of measure to use for styling. I thought "px" would be easiest, but it didn't seem responsive enough.
I could not automatically center the box at the top and bottom. I set margin-top but it might be unbalanced on some devices. I would like to know a better way.
What units to use in what situation really depends on what you want to do with a given design. However, pixels should be avoided in most situations except for cases where you don't want to resize something (for instance, border-sizes). That being said, I found this video to be very helpful:
Hey Fatima, great work on the desktop version of the design! One issue I noticed is that the left image has rounded corners on the top right and bottom right corners which the design doesn't have. An easy fix for this is to use four values for the border-radius property like so:
border-radius: 10px 0 0 10px;
This applies the values to the corner starting from the top-left and continues clockwise to the top-right, bottom-right, and bottom-left.