I'm currently experimenting with CSS Flexbox to structure the layout of my website, but it seems like I've hit a roadblock. Despite my best efforts, something's not quite right. Can anyone help me identify and fix the issue?

I have a container with child elements that I want to arrange using Flexbox, but the layout is not behaving as expected. Items are not aligning or distributing as I intended. I'm hoping you can review the code and point out what might be causing the problem.

here is my code

   
   
   



   




The goal is to have the three .flex-item elements evenly spaced within the .flex-container, with space between them. However, something is off, and the layout is not aligning as intended. Can you take a look and help me figure out what might be causing this layout hiccup?