text-align: center is not effecting display: inline-block
===

I'm pretty new to this, so please forgive me if I need to be a tad more descriptive. I have a subtitle on my website I want centered under by title. However, I also want to give the subtitle a bottom-border. I want the border to be the equivalent length of the subtitle though, so I figured I'd display: inline-block and text-align: center. Then, apply by bottom border. However, its not working. The subtitle stays aligned to the left. I've attached my HTML and CSS below: 

[My HTML][1]


[My CSS][2]

[What my page currently looks like][3]


  [1]: http://i.stack.imgur.com/liIFo.png
  [2]: http://i.stack.imgur.com/Z2WO2.png
  [3]: http://i.stack.imgur.com/m9aBE.png