title: CSS Flex-box not acting responsive
body: <p>Within my project I have a container <code>&lt;div&gt;</code> to which I add a border so it's visible to the user. </p>
  
  <p>I add <code>display: flex;</code> to the container so it can take advantage of flex box. My current code works perfectly. This is because it is currently fully responsive, meaning when I resize the window from the right or left side, the container also moves which is perfect for responsiveness.</p>
  
  <p>Here is my current code:</p>
  
  <pre><code> &lt;div class="flex-container"&gt;
              &lt;h1&gt;YO!&lt;/h1&gt;
   &lt;/div&gt;
  
  .flex-container {
      display: flex;
      flex-direction: row;
      border: 1px solid #e3e3e3;
      justify-content:center;
      align-items: center;
      margin-left: 40px;
  }  
  </code></pre>
  
  <p>However, when I add a width and height to the <strong>.flex-container</strong>, it doesn't act responsive when I resize the window - the container doesn't move with it.  </p>
  
  <p>So this happens when I add this to the container:</p>
  
  <pre><code>width: 350px;
  height: 615px;
  </code></pre>
  
  <p>Does anybody know why this is happening? Is there a certain way to set a width and height of the container that has <code>display: flex;</code> set on it? Thank you.</p>