Why does my CSS not work when I put it directly in style.css or demo-style.css?

Hi there,

I am trying to make my website automatically load my CSS without it overriding the default style first, however, when I add the following CSS (that works fine in the Custom CSS on the Theme Panel) to either the style.css or demo-style.css it does not show up at all on my website.

Any ideas why?

Here is the CSS I am adding:

.td-lifestyle .td-header-style-1 .sf-menu > li > a:hover {
color: #ffffff !important;
}

.td-post-category {
background-color: #fed64e !important;
color: #000;
}
.td-post-category:hover {
color: #ffffff;
}

.td_module_mx8 .td-post-category {
background-color: #fed64e !important;
color: #000;
}

.td_module_mx8:hover .td-post-category:hover {
color: #ffffff;
}

.single .td-category {
display: none;
}

@media screen and (max-width: 767px) {
.td-footer-wrapper::before {
background-image: url(https://www.syrupbee.com/wp-content/uploads/2018/01/Sunflower.jpg) !important;
opacity: 0.2 !important;
}
}

@media screen and (min-width: 1141px) {
.footer-logo-wrap img {
margin-top: 21px;
margin-left: 185px;
width: 35%;
}
}

@media screen and (min-width: 1019px) and (max-width: 1140px) {
.footer-logo-wrap img {
margin-top: 22px;
margin-left: 165px;
width: 35%;
}
}

@media screen and (min-width: 768px) and (max-width: 1018px) {
.footer-logo-wrap img {
width: 70%;
margin-top: 25px;
margin-left: 50px;
}
}

@media screen and (max-width: 767px) {
.footer-logo-wrap img {
width: 10%;
margin-top: -20px;
margin-bottom: -20px;
}
}

.td-lifestyle .td-header-style-1 .td-header-menu-wrap:before {
display: none !important;
}

.td-lifestyle .td-header-style-1 .td-header-menu-wrap:after {
display: none !important;
}

Thanks,
Chris