title: only centre second container
body: <p>i have a header-container and a quote-container within the body. I like the h1 element to be on the top left of the page and the quote-container in the center of the page.</p>
  <p>I applied display:flex to the body and both header-container and quote-container get centered.</p>
  <p>How can I center the quote-container only? Is it possible to achieve this using flexbox?</p>
  <p>Below are the html and css files:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap");
  
  html {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    min-height: 100vh;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .header-container {
    margin: 0;
    width: auto;
    max-width: 250px;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.8rem;
    margin-left: 100px;
    background-color: lightblue;
  }
  
  .quote-container {
    width: auto;
    max-width: 900px;
    padding: 20px 30px;
    border: 0.5px solid lightgray;
    border-radius: 10px;
  }
  
  .quote-text {
    font-size: 2.5rem;
  }
  
  .quote-author {
    margin-top:15px;
    font-size: 2rem;
    font-weight: 400;
    font-style: italic;
  }
  
  .button-container {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
  }
  
  button {
    cursor: pointer;
    font-size: 1.2rem;
    width: auto;
    height: 2.5rem;
    border:none;
    border-radius: 10px;
    color: #fff;
    background: black;
    outline: none;
    padding: 0.5rem 1.8rem;
    box-shadow: 0 0.3rem rgba(121,121,121,0.65);
  }
  
  button:hover {
    filter:brightness(110%);
  }
  
  button:active {
    transform: translate(0,0.3rem);
    box-shadow: 0 0.1rem rbga(255,255,255,0.65);
  }
  
  .twitter-button:hover {
    color: #38a1f3;
  }
  
  .fa-twitter {
    font-size:1.5rem;
  }
  
  /* Loader */
  .loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #333; 
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Quotes&lt;/title&gt;
      &lt;link rel="icon" type="image/png" href="favicon.png"&gt;
      
      &lt;!-- Old Favicon - Grab Icon From Google (Might be unsupported in the future) --&gt;
      &lt;!-- &lt;link rel="icon" type="image/png" href="https://s2.googleusercontent.com/s2/favicons?domain=jacinto.design"&gt; --&gt;
  
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="header-container"&gt;
          &lt;h1&gt;Quotes&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="quote-container" id="quote-container"&gt;
          &lt;div class="quote-text" id="quote-text"&gt;
              &lt;i class="fa fa-quote-left"&gt;&lt;/i&gt;
              &lt;span id="quote"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="quote-author" id="author"&gt;
              &lt;span id = "author"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="button-container"&gt;
              &lt;button class="twitter-button" id="twitter" title="Tweet This!" &gt;
                  &lt;i class="fab fa-twitter"&gt;&lt;/i&gt;
              &lt;/button&gt;
              &lt;button id="new-quote"&gt;New Quote&lt;/button&gt;        
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Loader --&gt;
      &lt;div class="loader" id="loader"&gt;&lt;/div&gt;
  
      &lt;!-- Script --&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>final output as below</p>
  <p><a href="https://i.stack.imgur.com/P1bSJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P1bSJ.png" alt="enter image description here" /></a></p>