CSS !important not working width child container

css, width

Solution

You'd have to make the `b` a block level element, by either setting it's `display` to `block` or `inline-block`.

Problem

I am trying to work with markup that someone else has created. My problem is that I have set the width of a parent container for use on other elements, but want to over-ride this on one specific child container that I can target using `.ticket13 .text b` and set it to 400px. However this doesn't work. If you check out this jsfiddle you can see the problem. How can I get `.ticket13 .text b`to be 400px wide without changing the markup? ``` <div class="left-container"> <div class="ticket13"> <p class="text"> <b> I want this container to be 400px wide </b> </p> </div> </div> .ticket13 .text b { width: 400px !important; } p.text { display: inline; margin: 5px; padding: 0; } P.text { font-size: 1em; font-style: normal; margin: 0; padding: 0.3em 0.3em 0; text-align: left; text-indent: 0; width: auto; } .ticket13 { display: inline; float: left; width: 186px; } .ticket13 { border: medium none; float: left; margin: 0; padding: 0; } .left-container { background-color: red; float: left; text-align: left; width: 60%; } ```

Original source