Media Query wont let me change Div width, but lets me change everything else

Question

I am trying to create a responsive website with media queries, but recently ran into an error I can not fix. The Media Query changes everything, except the width. Here is my code, any help would be appreciated.

<style>
    @media (max-width:950px){
        .value {
            width: 100%;
            float:none;
            background-color: black;
        }
    }
</style>
<div style="padding: 0px 5% 100px 5%; overflow:auto;">
    <div style="height: 400px;padding-top: 70px">
        <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;">
            <img alt="Custom printed t-shirts at a low price." src="images/priceicon.jpg">
            <h3 style="font-size:24px;"><span>Additional Units Lower Your Price</span></h3>
            <p>Use our simple, all-inclusive pricing system that gives instant access to printed t-shirts with screen-printing or embroidery. No hidden fees! Calculate prices <a title="Products" style="" href="https://www.coastalreign.com/products/">now</a>!</p>
        </div>

        <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;">
            <img alt="We design you custom printed tshirts free of charge." src="images/designicon.jpg">
            <h3 style="font-size:24px;"><span>Expert Design Review</span></h3>
            <p>Every order is reviewed by a designer after it is placed. After we convert images to print ready graphics, we will have a high quality mockup sent over for approval before we begin printing.</p>
        </div>
    </div>

<div style="height: 400px;padding-top: 70px">
        <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;">
                <img alt="Industry leading turnaround time for custom printed tshirts." src="images/timelyefficient.jpg">
                <h3 style="font-size:24px;"><span>Quick Processing and Free Shipping!</span></h3>
                <p>All orders are completed in 7 business days guaranteed. We will ship your order of printed clothing free to anywhere in Canada.</p>
        </div>

        <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;">
                <img alt="Quality custom printed t-shirts, on time and on budget." src="images/qualityicon.jpg">
                <h3 style="font-size:24px;"><span>We Invest In You.</span></h3>
                <p>Need help before placing your order? Not an issue, our artists are able to provide design assistance before payments are been made. This allows you to see how your ideas look on a t-shirt, hoodie, sweatpants, before any commitments.</p>
        </div>
    </div>
</div>

I've looked at a similar question : Media query div not changing width but everything else works and employed their suggestion, but it still does not work.

Any help would be appreciated!

Thanks!!!!

Answer 1

You are running into a specificity issue. Inline styling is considered more specific than css selectors and is often bad practice. !important can override anything, but it is almost always bad practice.

You should refactor your code and move your styling to its own file, or at least to your style tag at the top of the file, if separate files aren't possible. That way, everything will be working the way it should.