User Agent Style overwriting my CSS

I've tried various solutions found here on Stack Overflow with no luck.

I'm trying to set a div to display: none on screens over 768px wide using media query but user agent styling is overwriting my code.

My code:

@media (min-width: 768px) { 
    .elementToBeHidden {
         display: none!important;
    }
}

Solutions already tried with no luck:

1. Checking the doctype has been declared correctly - it has.
2. Implementing a CSS reset.
3. Using !important (as you can see from my code)
4. Checking my CSS file is being called properly - it is.

With all of these solutions the User Agent Styling continues to stubbornly overwrite my code. I've also tested the same code outside a media query in the general CSS with the same affect. My CSS is crossed out and overridden by the User Agent.

I'm using custom CSS in conjunction with Bootstrap v 4.0 but I can't see any indication that it's Bootstrap that is causing the problem, and in any case, !important has always worked to overwrite Bootstrap in the past.