title: How can I stop my image from being pushed to the left within a flex container when the text length increases?
body: <p>I have a logo and text aligned in the center of the page and when the text's length increases, the logo is pushed leftwards. I've tried so many things but cannot figure out how to fix this.</p>
  
  <p><a href="https://i.stack.imgur.com/CHJuT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CHJuT.png" alt=""></a></p>
  
  <p>here is my HTML</p>
  
  <pre><code>&lt;div class="app"&gt;
    &lt;div class="root"&gt;
      &lt;div class="container"&gt;
        &lt;img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"&gt;&lt;/img&gt;
        &lt;div class="text"&gt;
        &lt;span class="title"&gt;Stack Overflow&lt;/span&gt;
        &lt;span class="subtitle"&gt;Some More text 
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and my CSS </p>
  
  <pre><code>html, body {
    position: absolute;
    height: 100%;
    width: 100%;
    background: SlateGrey
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .app {
    position: relative;
    height: 100%;
    width: 100%;
  }
  
  .root {
    display: flex;
    height: 100%;
    width: 100%;
  }
  
   .container {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center
  }
  
  .text {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }
  
  .title {
    font-size: 22px;
    font-weight: bold;
  }
  
  .subtitle: {
    fontSize: 13px;
    max-width: 100px;
  }
  </code></pre>
  
  <p><strong>Codepen</strong>: <a href="https://codepen.io/anon/pen/LBYozL" rel="nofollow noreferrer">https://codepen.io/anon/pen/LBYozL</a></p>
  
  <p>Add more text to the span with class <code>subtitle</code> to see what I mean</p>