Flexbox have been used

Hey Yokke, Congratulations on completing this challenge...

• To handle the background circles, you need to give the section that contains the profile card the following style to put these circles as a background image:

.container {
  background: url(../images/bg-pattern-top.svg) right 50vw bottom 40vh no-repeat,
    url(../images/bg-pattern-bottom.svg) 50vw 50vh no-repeat;
  //...
}

• To center the component on the page add justify-content: center;

.container {
  background: url(../images/bg-pattern-top.svg) right 50vw bottom 40vh no-repeat,
    url(../images/bg-pattern-bottom.svg) 50vw 50vh no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* flex-direction: column; */  <------
  /* max-width: 100%; */         <------  you don't need to these properties here
  /* margin:8em auto; */         <------
}

• I suggest you put the status of the profile card into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:

<ul class="stats">
   <li><span class="stats-num">80K</span>Followers</li>
   <li><span class="stats-num">803K</span>Likes</li>
   <li><span class="stats-num"> 1.4K</span>Photos</li>
</ul>

I hope this is helpful to you... Keep coding👍

@Bayoumi-dev Thanks for the advice I will update the solution later and try to pay more attention to semantics . What you suggested it's just a base but I'm so used to div that I forget your recommandation thanks again !