You've added it within the 300px responsive rule. I find it's less confusing for people if they just add all new rules above the responsive section and make sure to close the 300px responsive rule:
Code:
@media only screen and (max-width: 300px) {
.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-featured-4 {
padding: 0 0 30px;
width: 100%;
}
}
And you're adding padding to the top now instead of the bottom like in your original rule.