title: CSS !important rule not overriding text alignment
body: <pre><code>a {
          font-size: 8pt;
          text-align: left !important;
          text-decoration: none;
    }
  
  .main {
          text-align: center;
    }
  
   &lt;div class="main"&gt;
      &lt;a href="#new_york_city"&gt;New York City&lt;/a&gt;&lt;br /&gt;
      &lt;a href="#long_island"&gt;Long Island&lt;/a&gt;&lt;br /&gt;
      &lt;a href="#upstate"&gt;Upstate New York&lt;/a&gt;&lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is a compact version of what I have and for me, using Firefox 5, the links are STILL centered, even though I I'm using !important on the "text-align: left".  It's confusing and irritating because i thought !important was the highest specificity and overrode all other rules.</p>
  
  <p>What's wrong here?</p>