Using Tailwind flex items not able to center

<div className="container mx-auto px-4 lg:px-0 flex flex-col max-w-screen-md justify-between items-center border-orange-500 border-2">
  <div className="container mx-auto px-4 lg:px-0 flex flex-col items-center">
    <div className="lg:w-3/5 flex justify-center border-2 border-red-500">
      <p> first </p>
    </div>
    <div className="lg:w-2/5 flex flex-row justify-center border-2 border-blue-500">
      <p> second </p>
    </div>
  </div>
  <div className="flex border-2 border-green-500">
    <div className="">
      <p> third </p>
    </div>
  </div>
</div

I have added borders around the items so they are more easily seen, but the issue was on line 2 with flex-row justify-center you need to change it to flex-col items-center or change to flex-wrap.