injecting CSS changes with chrome extension

I'm writing some custom chrome extensions to reformat certain sites. I'm having lots of luck with simply hiding things, however I've run into a problem trying to adjust a right-margin on something. Viewing the HTML results in the following:

<div id="bodyContent2" class="en">

In the styles area of the Chrome development tools I see

#bodyContent2.en {
  margin-right: 330px;
  min-height: 920px;
  width: auto;
}

If I manually change that to margin-right: 0px; with Chrome it does exactly what I want. However, the following lines of CSS do not work when called from my manifest.json file in 开发者_如何转开发my extension:

#bodyContent2 {margin-right:0px;}
[id='bodyContent2']{margin-right:0px;}
#bodyContent2 .en {margin-right:0px;}
.en {margin-right:0px;}

None of them work and I don't understand why not. I literally just started working with chrome extensions today. Help is much appreciated. In the individual attempts I see the following CSS striked through in the chrome dev tools:

#bodyContent2 {
    <strike>margin-right: 0px;</strike>
}
.en {
   <strike>margin-right: 0px;</strike>
}

Add !important to your rules to give them higher priority:

margin-right:0px !important;

If you want to understand the order in which css rules are applied read about selector specificity.