How to overwrite the registration of one div in bootstrap?

Question

I am setting up a bootstrap theme and I am having a problem that is probably very easy to solve.

I have a data block that looks like this:

<!-- Data block --> <article class="span4 data-block"> <div class="data-container"> <section> <img src="photo.jpg" width="350" height="350"> </section> <section> <p>Some writing below here</p> </section> </div> </article> <!-- /Data block --> 

And my CSS for this part:

 .data-block .data-container { padding: 23px 23px 3px 23px; background-color: #ffffff; border: 1px solid #bec2c8; *zoom: 1; -webkit-border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 4px 0 -3px #fff, 0 4px 0 -2px #bec2c8, 0 8px 0 -5px #fff, 0 8px 0 -4px #bec2c8; -moz-box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 4px 0 -3px #fff, 0 4px 0 -2px #bec2c8, 0 8px 0 -5px #fff, 0 8px 0 -4px #bec2c8; box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 4px 0 -3px #fff, 0 4px 0 -2px #bec2c8, 0 8px 0 -5px #fff, 0 8px 0 -4px #bec2c8; } 

Because of:

 padding: 23px 23px 3px 23px; 

I have a space around the image. I want to leave the uppercase letters the same for all other sections of the data block on the website, but they have no indentation (so that the image is completely displayed without filling inside the div) on this one data block.

I tried:

 <div class="data-container nopadding"> 

and then added an extra class in CSS with the addition of 0px, but that didn't work for the override. I am sure that where I am doing something wrong.

Can someone lead me in the right direction? Many thanks:)

Answer 1

You can either try .data-container.nopadding as a CSS selector, not just .nopadding, and you can also specify! important after padding: 0 to force this if the above doesn't work.