Centering a link - html

Question

I'm trying to center a bordered READ MORE link on a web page, but haven't succeeded yet. The link still sits on the left of the page:
I'm using Twitter Boostrap and that's how the HTML looks like:
<div class="container">
<h2 class="more">read more</h2>
</div> <!--end container-->
And the CSS:
#process .more {
border: 1px solid #392e2e;
padding: 15px;
display: inline-block;
margin: 0 auto;
}
#process .more a {
color: #392e2e;
text-decoration: none;
text-align: center;
}
I've also tried it with Bootstrap's class="text-center", but that doesn't work either. Here's a link to my project, you can see the READ MORE link issue at the very bottom of the page.
Thank you for your help.

Answer 1

Use the text-center class but use it on the parent div container for the link:
<div class="container text-center">
<h2 class="text-center more">read more</h2>
</div>

Answer 2

You can do it two ways:
1. Block display method:
#process .more a {
color: #392e2e;
text-decoration: none;
display:block;
width:100px; //Adjustable and depends on you
margin:0 auto;
}
or:
2. Outer element align:
h2.more {
display:block;
text-align:center;
}
h2.more a {
display:inline-block;
width:auto;
}
Here is the fiddle with 2 examples: Example
There are actually other ways to do it with CSS, but these two are the most common.