H2 and list elements are not resizing to fit into cards after media query change

HTML-CSS
#1

Tell us what’s happening:
Thanks for the help in advance…

I have added a media query to change the sizes of my cards when the screen is equal to or less than 980px.

While the card it self re-sizes, the h2 and list elements do not resize/stay inside the cards. im not sure why, i tried removing the margins at the 980px breaking point but that doesn’t do anything ( not sure why that doesn’t reflect either ).

You can find this code section under my 5th comment

I use chrome developer tools to check the responsiveness

Your code so far
https://codepen.io/Cl0udFir3/pen/vYXQMmR?editors=1100

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

#2

So figured out what i needed to do:

I was putting the media query above the original elements in the css, while for whatever reason it allowed me to change the color of the text/h2 & UL list, it did not allow me to change any numerical values.

Once i put media queries below the original elements i was able to have it change the numerical values for font-size, padding, margin, etc…

Im still confused as to why the text did not adjust automatically to the grid size… My thinking is that i had too big of a margin-bottom & padding between the texts and li items…