Need help centering DIVs in FlexBox

HTML & CSS
1

I’m working on a small project:

https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT

I am trying to center the block as shown in the picture.

Here is my code:

<style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
    body {
      background-color: hsl(210, 46%, 95%);
    }
    .flex-container {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      height: 200px;
      width: 800px;
      margin: auto;
    }
    img {
      width: 200px;
      height: 200px;
    }
  </style>

<body>
  <div class="flex-container">
    <div class="img-section">
      <img src="images/drawers-square.jpg"/>
    </div>
    <div>
      <p>Shift the overall look and feel by adding these wonderful 
      touches to furniture in your home</p>

      <p>Ever been in a room and felt like something was missing? Perhaps 
      it felt slightly bare and uninviting. I’ve got some simple tips 
      to help you make any room feel complete.</p>

      <p>Michelle Appleton</p>
      <p>28 Jun 2020</p>
      Share
    </div>
  </div>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>
</body>

My code doesn’t center the block, it just moves the text slightly. Does anyone know why?

Thanks a lot!