When working with CSS units, ems are based on the inherited font-size, making them a relative size. As a beginner, it might be best to stick with px values for now. Following @MichaelSorensen's advice, consider setting a lower value initially. Your media query specifies that "all windows with a max-width of 980px should apply these values." If you want this to only apply to smaller devices, adjust the value accordingly.
Check out standard device widths [CSS Tricks].
It's important to understand the concept of "mobile first," which involves starting with media queries that apply to all devices and then adding breakpoints for specific sizes going upwards. Here's a simplified example.
/* Applies to .my-class regardless of size until overridden */
.my-class {
background-color: #f00; /* red */
}
/* Applies from 768px onwards, targeting many tablets */
@media screen and (min-width: 768px) {
.my-class {
background-color: #0f0; /* green */
}
}
/* Applies from 1200px onwards, targeting larger devices */
@media screen and (min-width: 1200px) {
.my-class {
background-color: #00f; /* blue */
}
}
This is a basic explanation, but if you're struggling with understanding media queries from blog posts, I hope this clears things up a bit.