Media queries not working?

#1

I am very unsure as to why my original styles are overwriting my media queries. I am doing mobile first, however when I hit a 600px breakpoint, the styles are still being overwritten as seen here:
Screen Shot 2020-03-30 at 12.34.05 PM

This is at 600px, I am importing my responsive css file at the end:

import './About.css'
import '../../theme.css'
import '../responsive.css'

@media screen and (min-width: 600px) {
  /* About Section */
  .lightning-strike {
    position: absolute;
    top: 2%;
    left: 0;
    z-index: 0;
    transform: rotate(122deg);
  }
}
#2

Fixed. Called the css file in my main component and it worked.

#3