If you use the % unit, it is sure you will have something responsive and answering your expectations. Just the unit you use is not the more appropriate here, even it is a relative unit. You can check also the units vh (viewport height) and vw (viewport width).
You’re welcome @troyb16! There are many units and according to the case you are facing, some are better to use. After, you don’t need to use them all, it is good to know them in case you work on projects where some units are used already, but you can have your selected ones. You can search online the type of units for CSS, I give you a link: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units. They have short explanation for each unit, but you maybe already saw that page
If you set the width on an element to a specific size then it won’t be responsive to changes in its parent’s width because you have told it to always stay at a specific width.
This means the element will always be 22rem wide. Granted, the physical width on the page will change as the font size changes, but it will always be 22rem which means its width won’t change if its parent’s width changes. To get a true responsive width you generally want to set the width to 100% and then you can put a max-width on it if you need to prevent it from getting too big.
Also, I highly recommend you use rem units for all width-related properties you can, including for media queries. As I alluded to above, using rem allows your page to be responsive to changes in font size as well as changes in view port width. This is a nice accessibility enhancement for people who have poor eyesight and need to increase the font size in order to read the page.
I personally use rem for almost everything except perhaps little things like borders.