Why is the last element in my flex column not aligned? - html

Question

Here is how it looks like: https://gyazo.com/77de215669cf2d9cd3ca35a0e064c7bf
I'm not sure why the last box isn't in the center. This is my css code:
.recipe1{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.recipe2{
border-radius: 10px;
box-shadow: 0px 5px 20px rgb(71,71,71);
margin: 20px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
background: white;
align-items: center;
min-width: 50%;
}
HTML:
<div className="recipe1">
<div className="recipe2">
<h1 className="display-4 p-3">{title}</h1>
<ul> {/*Ingredients is an array of objects, so need to iterate through it with map to display*/}
{ingredients.map(ingredient => (
<li className="lead">{ingredient.text}</li>
))}
</ul>
<p>Calories: {Math.floor(calories)}g</p>
<img className={style.image} src={image} alt="Cannot display :("></img>
</div>
</div>
I'm using react and bootstrap so there's some other stuff in there that looks different.