title: Using CSS to center flex elements regardless of screen size
body: <p>Question Summary: I cannot figure out why the images on my webpage are only centered when the screen is smaller vs on my desktop, where the images are left-aligned.</p>
  
  <p>Question Body: I am building a website using HTML and CSS for the first time, and while I'm taking lots of tutorials and reading resources, I am still confused on the concept of flex items. On my current website, I have three images horizontally lined up and they are centered when I view the page on a laptop. However, when I view it on my larger desktop, all of the images are left-aligned. I have scoured dozens of pages here about centering items in CSS but nothing is making sense so far -- that may be due to my own naivety with using CSS and HTML, however. I've posted my CSS and HTML code below. Do I have something in this code that is incorrectly left-aligning the images when I expand the screen? (Note: this is my first question on Stack Overflow and while I've read the guidelines for posting questions, I would love any feedback you have on how I can make this clearer). Thank you! (Also, FYI, since it's my first post I am not allowed to embed images yet, or else I would have screenshots of what I'm talking about). </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>/* Box Model */
  
  *,
  *:before,
  *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  
  /* Containers */
  
  .container {
    margin-left: auto;
    margin-right: auto;
  }
  
  .container.\31 25\25 {
    width: 100%;
    max-width: 100em;
    min-width: 80em;
  }
  
  .container.\37 5\25 {
    width: 60em;
  }
  
  .container.\35 0\25 {
    width: 40em;
  }
  
  .container.\32 5\25 {
    width: 20em;
  }
  
  .container {
    width: 80em;
  }
  
  @media screen and (max-width: 1680px) {
    .container.\31 25\25 {
      width: 100%;
      max-width: 100em;
      min-width: 80em;
    }
    .container.\37 5\25 {
      width: 60em;
    }
    .container.\35 0\25 {
      width: 40em;
    }
    .container.\32 5\25 {
      width: 20em;
    }
    .container {
      width: 80em;
    }
  }
  
  @media screen and (max-width: 1280px) {
    .container.\31 25\25 {
      width: 100%;
      max-width: 81.25em;
      min-width: 65em;
    }
    .container.\37 5\25 {
      width: 48.75em;
    }
    .container.\35 0\25 {
      width: 32.5em;
    }
    .container.\32 5\25 {
      width: 16.25em;
    }
    .container {
      width: 65em;
    }
  }
  
  @media screen and (max-width: 980px) {
    .container.\31 25\25 {
      width: 100%;
      max-width: 112.5%;
      min-width: 90%;
    }
    .container.\37 5\25 {
      width: 67.5%;
    }
    .container.\35 0\25 {
      width: 45%;
    }
    .container.\32 5\25 {
      width: 22.5%;
    }
    .container {
      width: 90%;
    }
  }
  
  @media screen and (max-width: 736px) {
    .container.\31 25\25 {
      width: 100%;
      max-width: 112.5%;
      min-width: 90%;
    }
    .container.\37 5\25 {
      width: 67.5%;
    }
    .container.\35 0\25 {
      width: 45%;
    }
    .container.\32 5\25 {
      width: 22.5%;
    }
    .container {
      width: 90% !important;
    }
  }
  
  @media screen and (max-width: 480px) {
    .container.\31 25\25 {
      width: 100%;
      max-width: 112.5%;
      min-width: 90%;
    }
    .container.\37 5\25 {
      width: 67.5%;
    }
    .container.\35 0\25 {
      width: 45%;
    }
    .container.\32 5\25 {
      width: 22.5%;
    }
    .container {
      width: 90% !important;
    }
  }
  
  
  /* Flex */
  
  .flex {
    display: -ms-flexbox;
    -ms-flex-wrap: nowrap;
    -ms-flex-pack: justify;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 900px;
    min-width: 500px;
  }
  
  .flex.flex-2 {
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
  }
  
  .flex.flex-2 article {
    width: 100%;
  }
  
  @media screen and (max-width: 980px) {
    .flex.flex-2 article {
      width: 100%;
      margin-bottom: 3em;
      auto
    }
    .flex.flex-2 article:last-child {
      margin-bottom: 0;
      auto
    }
  }
  
  @media screen and (max-width: 480px) {
    .flex.flex-2 br {
      display: none;
    }
  }
  
  
  /* Box */
  
  .box {
    border: solid 1px #dbdbdb;
    margin-bottom: 2em;
    padding: 1.5em;
  }
  
  .box&gt; :last-child,
  .box&gt; :last-child&gt; :last-child,
  .box&gt; :last-child&gt; :last-child&gt; :last-child {
    margin-bottom: 0;
  }
  
  .box.alt {
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  
  .box.person {
    border: solid 1px #8dcca9;
    padding: 3em 1.5em;
  }
  
  .box.person h3 {
    margin: 0;
  }
  
  .box.person .image {
    margin-bottom: 1em;
  }
  
  .box.person .image img {
    max-width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Main --&gt;
  &lt;section id="main" class="wrapper"&gt;
    &lt;div class="inner"&gt;
      &lt;header class="align-center"&gt;
        &lt;h2&gt;A comprehensive collection of workshops, webinars, and resources for Belmont Forum researchers&lt;/h2&gt;
      &lt;/header&gt;
  
      &lt;section id="three" class="wrapper align-center"&gt;
        &lt;div class="inner"&gt;
          &lt;div class="flex flex-2"&gt;
            &lt;article&gt;
              &lt;div class="w3-circle"&gt;
                &lt;img src="images/globe.jpg" alt="Pic 02" /&gt;
              &lt;/div&gt;
              &lt;header&gt;
                &lt;h3&gt;By Country/Region&lt;/h3&gt;
              &lt;/header&gt;
              &lt;footer&gt;
                &lt;a href="Data_Management_Trainings.md" target="_blank" class="button"&gt;Find Resources&lt;/a&gt;
              &lt;/footer&gt;
            &lt;/article&gt;
            &lt;article&gt;
              &lt;div class="w3-circle"&gt;
                &lt;img src="images/computer.jpg" alt="Pic 01" /&gt;
              &lt;/div&gt;
              &lt;header&gt;
                &lt;h3&gt;By Resource Type&lt;/h3&gt;
              &lt;/header&gt;
              &lt;footer&gt;
                &lt;a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf" target=_blank " class="button "&gt;Find Resources&lt;/a&gt;
         &lt;/footer&gt;
        &lt;/article&gt;
        &lt;article&gt;
         &lt;div class="w3-circle "&gt;
          &lt;img src="images/business_woman.jpg " alt="globe " /&gt;
         &lt;/div&gt;
         &lt;header&gt;
          &lt;h3&gt;By Role&lt;/h3&gt;
         &lt;/header&gt;
         &lt;footer&gt;
          &lt;a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf " target=_blank" class="button"&gt;Find Resources&lt;/a&gt;
              &lt;/footer&gt;
            &lt;/article&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>