Media Queries Are Overlapping

I’m making a simple HTML and CSS site. For responsive web design on mobile I’m learning media queries but they’re overlapping each other.

I.e the: @media max-width 500px is affecting the @media max-width 1000px. This is just a gist of it. Any advice will help, thank you.