Vertically centering in flex-direction: column

Question

I am trying to vertically center the elements on the left side of my page using Flexbox but haven't been able to figure it out. They're organized via flex-direction: column, and I am not sure how to center horizontally when this is set. See below for my code and for a live version of my website so far. I've separated the two flex containers into right and left so I can handle and center them separately. I am only dealing with the left side, for now. So, I'll show the CSS for that first.

I've tried align-items, justify-content, and align-self but those haven't worked.

Thanks, in advance!

Live Website: https://huddle-single-landing-page.jordanchude.now.sh/

HTML

<div class="container">
<div class="left-side">
  <img id="huddle" src="https://i.ibb.co/FnJS8vM/logo.png" alt="logo" border="0">
  <img id="illustration" src="https://i.ibb.co/L9HBmDZ/illustration-mockups.png" alt="illustration-mockups" border="0">
</div>
<div class="right-side">
  <p id="headline">Build The Community Your Fans Will Love</p>

  <p id="subtitle">
          Huddle re-imagines the way we build communities. You have a voice, but so does your audience. 
          Create connections with your users as you engage in genuine discussion.
  </p> 

  <button>Register</button>

  <div class="social-icons">
    <span class="fa-stack fa-lg">
        <i class="far fa-circle fa-stack-2x"></i>
        <i class="fab fa-facebook-f fa-1x"></i>
    </span>
    <span class="fa-stack fa-lg">
        <i class="far fa-circle fa-stack-2x"></i>
        <i class="fab fa-twitter fa-1x"></i>
    </span>
    <span class="fa-stack fa-lg">
        <i class="far fa-circle fa-stack-2x"></i>
        <i class="fab fa-instagram fa-1x"></i>
    </span>
  </div>
</div>

CSS

 .container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

/* Left Side */
.left-side {
    display: flex;
    flex-direction: column; 
    width: 800px;
}

#huddle {
    width: 200px;
    align-self: flex-start; 
}

#illustration {
   width: 100%; 
}

Answer 1

There is no extra height in your container, so there's no free space for centering.

Make this adjustment:

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /* align-items: center */ /* vertically centers both left and right elements */
    flex-wrap: wrap;
    height: 100vh; /* child would inherit height through align-content: stretch default */
}

.left-side {
    display: flex;
    flex-direction: column;
    width: 800px;
    align-self: center; /* vertically centers the flex item */        
    /* justify-content: center; */ /* vertically centers the content of the flex item */
}