title: flexbox not centering with justify-content, div elements taking up too much space i'm guessing, but why?
body: <p>I've been trying to get these objects to center and when I used an <code>&lt;a href&gt;</code> tag, I could see that I was able to click way away from the picture and still the link would activate.  I am assuming this means that the child containers are taking up 50% of the width each, despite only a tiny portion of the container being full.  Why is there blank space that is preventing me from aligning my objects? </p>
  
  <p>RELEVANT HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="previous"&gt;
        &lt;img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png"&gt;
        &lt;p&gt;Previous Project &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="next"&gt; 
      &lt;img class="containerimg"  src="https://i.imgur.com/s11MTLc.png"&gt; 
        &lt;p&gt; Next Project&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>RELEVANT CSS: </p>
  
  <pre><code>.container {
    display: flex; 
    justify-content: center;
  }
  .containerimg {
    width: 30%;
    height: auto;
  }
  .next {
    display: flex;
    flex-direction: column;
  }
  .previous{
    display: flex;
    flex-direction: column;
  }
  </code></pre>
  
  <p>CODEPEN: <a href="https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100" rel="nofollow noreferrer">https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100</a></p>