Inline CSS working ... External CSS not-working for: Text-Align: Center, on a twitter bootstrap Button

Question

Have styled a twitter bootstrap button to be centered in a thumbnail, and when the CSS is Inline (header or body) it works perfectly, but after moving the styles to an External stylesheet the button is left-aligned..

All the other styles that were inline and moved to an external sheet work perfectly..

Here's a bootply showing a centered-aligned button via an inline style:

http://bootply.com/65903

If you move the style to an external stylesheet, the button will not be centered..

Please advise!

Here's the CSS Style:

<style> #centered {text-align: center;} </style>

Here's the HTML:

<div class="full span8" id="centered">
  <div class="row-fluid">
    <ul class="thumbnails">
      <li class="span3" id="thumbnail-width">
        <div class="thumbnail">
          <div id="image"></div>
          <div class="caption" id="caption-color">
            <div id="header">
              <h1>
                Header
              </h1>
            </div><br>
          </div>
          <p>
            <div class="btn-group">
              <button class="btn btn">Button</button>
                <button class="btn btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li>Action</li>
              </ul>
            </div><!--/View-->
          </p>
        </div>
      </li>
    </ul>
  </div><!--/row-->
</div><!--/span-->

Answer 1

Try this:

<div class="full span8 text-center" id="centered">