title: How to align text at the center of a footer in CSS?
body: <p>I have a <a href="http://ferhan.ferohost.com/" rel="nofollow noreferrer">domain</a> in which I have made a page in HTML, CSS and Bootstrap 3. </p>
  
  <p>If we scroll down at the footer, we can the text <code>Footer</code> is not in the center as shown below in the image (screenshot of the footer from the <a href="http://ferhan.ferohost.com/" rel="nofollow noreferrer">domain</a>). Its little bit up.</p>
  
  <p><a href="https://i.stack.imgur.com/jgUOL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jgUOL.png" alt="enter image description here"></a></p>
  
  <p>I am wondering what changes I need to make in the existing CSS codes so that the text <code>Footer</code> exactly comes at the center.</p>
  
  <p>The CSS codes which I have used in the footer section is:</p>
  
  <pre><code>    /**** Footer START ****/
  
      .footer {
          width: 100%;
          height: 12%;
          background-color: black;
          display: flex;
          align-items: center;
          background-size: 100% 100%;
          justify-content: center;
      }
  
      .footer p {
          color: white;
          font-size: 2.25em;
      }
  /**** Footer FINISH ****/  
  </code></pre>
  
  <p>I have used the same CSS codes for the Header and its working perfectly as shown below in the design:</p>
  
  <p><a href="https://i.stack.imgur.com/ShArK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ShArK.png" alt="enter image description here"></a>  </p>
  
  <p>I do agree that <code>in the actual snippets and in the fiddle as well, its working quite fine</code> but I am not sure why its not working in the actual <a href="http://ferhan.ferohost.com/" rel="nofollow noreferrer">domain</a>. </p>