title: Text won't center on the page above a flexbox
body: <p>I can't seem to get my title and anything below to centre no matter what I use in CSS. Any help would be appreciated!</p>
  <pre><code>&lt;div class=&quot;title&quot;&gt;&lt;h1&gt;Places to Stay&lt;/h1&gt;&lt;/div&gt;
  &lt;div id =&quot;imageContainer&quot;&gt;
  &lt;img src=&quot;../assets/images/barcelona.jpg&quot; alt=&quot;barcelona image&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;
  &lt;!--img src=&quot;https://www.klm.com/destinations/gb/en/europe/spain/barcelona&quot;--&gt;
  &lt;img src=&quot;../assets/images/milan.jpg&quot; alt=&quot;milan image&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;
  &lt;!--img src=&quot;https://www.timeout.com/milan--&gt;
  &lt;img src=&quot;../assets/images/paris.jpg&quot; alt=&quot;paris image&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;
  &lt;!--img src=&quot;https://www.archdaily.com/922278/23-places-in-paris-every-architect-must-visit&quot;--&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>/*This comment is for id imageContainer. It sets a display as flex in a row and spaces it evenly*/
  #imageContainer {
      display:flex;
      flex-direction: row;
      justify-content: space-evenly;
  }
  
  /*This is a comment for the id &quot;title&quot;, it sets titles to a different size and centers it*/
  .title {
      font-size: 3em;
      text-align: center;
      padding: 1px 2px 1px 5px;
  }
  </code></pre>