title: Centering a inline-block element
body: <p>I want center a inline-block element, with a text inside.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;div class="container body"&gt;
          &lt;h1 class="title"&gt;FAÇA SUA RESERVA&lt;/h1&gt;
          &lt;p&gt;Escolha o dia que deseja participar e aceite o nosso aplicativo.&lt;/p&gt;
          &lt;hr&gt;
          &lt;div class="row"&gt;
              &lt;div class="box thursday col-xs-6 col-sm-3"&gt;
                  &lt;img src="assets/images/box.png"&gt;
              &lt;/div&gt;
              &lt;div class="box friday col-xs-6 col-sm-3"&gt;
                  &lt;img src="assets/images/box.png"&gt;
              &lt;/div&gt;
              &lt;div class="box friday_2 col-xs-6 col-sm-3"&gt;
                  &lt;img src="assets/images/box.png"&gt;
              &lt;/div&gt;
              &lt;div class="box saturday col-xs-6 col-sm-3"&gt;
                  &lt;img src="assets/images/box.png"&gt;
              &lt;/div&gt;
              &lt;div class="col-9"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I need center just the title, and the subtitle "FAÇA SUA RESERVA", for this i'm using:</p>
  
  <pre><code>.container.body .subtitle,
  .container.body .title {
    text-align: center;
  }
  </code></pre>
  
  <p>It's working ok, but if i make changes in the title element, the text-align: center it stops working..</p>
  
  <p>This is the css for the title element:</p>
  
  <pre><code>.title {
    display: inline-block;
    border: 1px solid #F98835;
    color: #f98835;
    padding: 10px;
  }
  </code></pre>
  
  <p>i already try setup margin: 0 auto;, and it doesn’t seem to have an effect</p>