title: Text-Align center not working in Footer
body: <p>So I've created a Website and the footer is fine and everything but when it becomes and smaller screen the writing at the bottom doesn't align center. Now I've tried display: inline-block; and text-align: center; and neither of these work.</p>
  
  <p>Any help I am grateful for :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (max-width: 767px) {
      footer p{
          display: inline;
      }
  }
  
  footer {
      padding-top: 15px;
      padding-bottom: 5px;
      background-color: #2c3e50;
  }
  
  footer .container {
      font-size: 18px;
  }
  
  footer .container p{
      margin-top: 10px;
  }
  
  footer .container a{
      color: #8F8;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;footer&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;p class="pull-left copyright text-muted"&gt;&amp;copy; 2015 AAA Oven Cleaning&lt;/p&gt;
                  &lt;p class="pull-right text-muted"&gt;Created By 
                                  &lt;a href="#"&gt;Crafted-Website&lt;/a&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/footer&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>Image link (This is what's happening): <a href="http://gyazo.com/419bc4a2bfda59139de9ef3440f74e18" rel="nofollow noreferrer">http://gyazo.com/419bc4a2bfda59139de9ef3440f74e18</a></p>
  
  <p>I have solved this now, all I had to do was</p>
  
  <pre><code>@media screen and (max-width: 767px) {
      footer div {
          display: inline-block!important;
      }
  }
  </code></pre>