Why are the items not in the middle?

Question

The display of the container is flex and the flex-direction: column so I tried using align-self to move a heading to the center but it does not work.

Should I use margin: auto intead?

Also, I tried moving the container itself to the middle, but the margin-right is smaller than the margin-left even though I made both of them auto. I partly think that this may be because of the scroll bar on the right but I'm not sure. It is more noticeable with a smaller screen than on a larger one but it is still present on both small and big screen.

How do I fix this?

.recipe-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  border: 3px solid var(--black);
  padding: 1rem;
  background-color: var(--rose);
}

.side-info {
  background: var(--rose)
}

.top-info {
  background: var(--rose);
  justify-content: center;
  align-content: center;
}

.top-info img {
  border: 3px solid var(--black)
}

.top-info h3 {
  align-self: center;
}

<div class="recipe-container">
  <div class="top-info">
    <img src="img/sliced cake.jpg" alt="">
    <h3>chocolate cake</h3>
  </div>
  <div class="side-info">
    <ul class="notes main-info">
      <li class="single-note">
        <i class="fa-solid fa-clock"></i>
        <span>Prep: <i>35 mins</i></span>
      </li>
      <li class="single-note">
        <i class="fa-regular fa-clock"></i>
        <span>Cook: <i>20 mins</i></span>
      </li>
      <li class="single-note">
        <i class="fa-solid fa-circle-check"></i>
        <span>Easy</span>
      </li>
      <li class="single-note">
        <i class="fa-solid fa-utensils"></i>
        <span>Serves: <i>12-14</i></span>
      </li>
    </ul>
    <h5>Nutrition - per serving</h5>
    <ul class="nutrition">
      <li class="nutri-note">
        <p>kcal</p>
        <i>523</i>
      </li>
      <li class="nutri-note">
        <p>fat</p>
        <i>29g</i>
      </li>
      <li class="nutri-note">
        <p>saturates</p>
        <i>18g</i>
      </li>
      <li class="nutri-note">
        <p>carbs</p>
        <i>59g</i>
      </li>
      <li class="nutri-note">
        <p>sugars</p>
        <i>47g</i>
      </li>
      <li class="nutri-note">
        <p>fibre</p>
        <i>2g</i>
      </li>
      <li class="nutri-note">
        <p>protein</p>
        <i>6g</i>
      </li>
      <li class="nutri-note">
        <p>salt</p>
        <i>0.6g</i>
      </li>
    </ul>
  </div>
  <div class="main-info">
    <p>Master the chocolate cake with an airy, light sponge and rich buttercream filling. It's simple enough for an afternoon tea but special enough for a party too</p>
    <div class="ingredients">
      <h5>ingredients</h5>
      <ul>
        <li><i>For the cake</i></li>
        <li>200g golden caster sugar</li>
        <li>200g unsalted butter</li>
        <li>4 large eggs</li>
        <li>200g self-raising flour</li>
        <li>2 tablespoons cocoa powder</li>
        <li>1 tsp baking powder</li>
        <li>½ tsp vanilla extract</li>
        <li>2 tablespoons milk</li>
        <li><i>For the buttercream</i></li>
        <li>100g chopped milk chocolate</li>
        <li>200g butter</li>
        <li>400g icing sugar</li>
        <li>5 tablespoons cocoa powder</li>
        <li>2 tablespoons milk</li>
        <li><i>For the chocolate shards</i></li>
        <li>50g dark chocolate</li>
        <li>25g milk chocolate</li>
        <li>25g white chocolate</li>
      </ul>
    </div>
    <div class="method">
      <div class="single-step">
        <h5>Step 1</h5>
        <p>Heat oven to 190C/170C fan/gas 5. Butter the base and sides of two 20cm round sandwich tins and line the bases with baking parchment.</p>
      </div>
      <div class="single-step">
        <h5>Step 2</h5>
        <p>In a large bowl, beat together 200g golden caster sugar, 200g softened unsalted butter, 4 large eggs, 200g self-raising flour, 2 tbsp cocoa powder, 1 tsp baking powder, ½ tsp vanilla extract, 2 tbsp milk and a pinch of salt until pale.</p>
      </div>
      <div class="single-step">
        <h5>Step 3</h5>
        <p>Divide the mixture between the prepared tins. Bake for 20 mins or until a skewer inserted into the centre of the cake comes out clean.</p>
      </div>
      <div class="single-step">
        <h5>Step 4</h5>
        <p>Leave to cool in the tin for 10 mins, then turn out onto a wire rack to cool completely.</p>
      </div>
      <div class="single-step">
        <h5>Step 5</h5>
        <p>For the buttercream, put 100g chopped milk chocolate in a heatproof bowl and melt in the microwave, stirring every 30 secs. Leave the melted chocolate to cool for 5 mins.</p>
      </div>
      <div class="single-step">
        <h5>Step 6</h5>
        <p>Mash 200g softened butter and 400g icing sugar together with a fork, then switch to a wooden spoon or electric beaters, if you have them.</p>
      </div>
      <div class="single-step">
        <h5>Step 7</h5>
        <p>Sift in 5 tbsp cocoa powder with a pinch of salt and pour in the melted chocolate and 2 tbsp milk. Mix again until smooth.</p>
      </div>
      <div class="single-step">
        <h5>Step 8</h5>
        <p>On a cake stand or large plate, sandwich the cakes together with half of the buttercream, then spread the rest on top. Decorate with chocolate shards, if you like.</p>
      </div>
      <div class="single-step">
        <h5>Step 9</h5>
        <p>To make chocolate shards: melt 50g dark chocolate and pour it onto a tray lined with baking parchment or foil.</p>
      </div>
      <div class="single-step">
        <h5>Step 10</h5>
        <p>Now melt 25g milk chocolate and 25g white chocolate and drizzle them over the dark chocolate before it sets.</p>
      </div>
      <div class="single-step">
        <h5>Step 11</h5>
        <p>Shake the tray gently to level the mixture then leave to set somewhere cool.</p>
      </div>
    </div>
  </div>
</div>