Important CSS rule! Doesn't override text alignment

Question

a {
        font-size: 8pt;
        text-align: left !important;
        text-decoration: none;
  }

.main {
        text-align: center;
  }

 <div class="main">
    <a href="#new_york_city">New York City</a><br />
    <a href="#long_island">Long Island</a><br />
    <a href="#upstate">Upstate New York</a><br />
</div>

This is a compact version of what I have, and for me, using Firefox 5, links have STILL with centering, although I use! important for "text-align: left". This is confusing and annoying because I thought that the highest specificity was important and overruled all other rules.

What is wrong here?

Answer 1

, , . text-align:center; .main, div 'alignLeft' !important.

Answer 2

. - .

<div class="main">
 <div class="left">
    <a href="#new_york_city">New York City</a><br />
    <a href="#long_island">Long Island</a><br />
    <a href="#upstate">Upstate New York</a><br />
  </div>
</div>

Answer 3

, , :

.main a {
  display:block;
  font-size: 8pt;
  text-align: left !important;
  text-decoration: none;
}

Text-align (, div). "span" "a" , display: block .

Answer 4

- inline , , , , , . main , main a.

, .

Answer 5

, a inline . , a.

,

• .main div text-align:left;
• a p text-align:left;

Answer 6

fiddle, , - inline, 't ( ).

inline-blocks blocks , , .

, , , float:left, .