Why is my CSS Flexbox layout not aligning items correctly? [closed]

I am trying to create a simple Flexbox layout to center items horizontally and vertically inside a <div>. However, my CSS is not aligning the items as expected.

Problem Details:

• I want to center a text inside a <div> using display: flex.
• I used justify-content: center; and align-items: center;, but the text still appears in the top left corner instead of being centered.
• I checked my CSS file, and it is linked correctly.

My Code:

.container {  width: 300px;  height: 150px;  background-color: lightblue;  display: flex;  justify-content: center;  align-items: center;}

<div class="container"><p>This text should be centered</p></div>

The text inside <div class="container"> should be centered both horizontally and vertically.