title: How do I align Font Awesome icons to the right?
body: <p>I'm trying <code>text-align: right</code> in my CSS, but text-align is not moving it for some reason. I want the website title left aligned and the icon right aligned on the same line. Here's what I am trying.</p>
  
  <p><a href="https://jsfiddle.net/t39rk01d/" rel="noreferrer">JS Fiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"&gt;
  
  &lt;div class="top-container"&gt;
      &lt;h2&gt;Website Title&lt;/h2&gt;
  
      &lt;i class="fas fa-bars"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
    margin: 0;
  }
  
  .top-container {
      padding: 20px;
      margin: 0;
      width: 100%;
      color: rgb(255, 255, 255);
      background-color: rgba(0, 0, 0, 0.75);
      font-size: 2em;
      font-weight: bold;
  }
  
  .top-container i {
      color: red;
      display: inline-block;
      text-align: right;
  }
  
  .top-container h2 {
      display: inline-block;
  }
  
  h2 {
    margin-top: 10px;
  }
  </code></pre>