I have a simple box with text inside (Image available below). I'm trying to center the text using justify-content: center, but it's not working even though there is space available. I know text-align: center will do the job, but I want to understand why justify-content isn't behaving as I'd expect.
.box { background-color: aquamarine; width: 300px; height: 300px; display: flex; justify-content: center; /* doesn't center */ /* text-align: center; */ /* this will center */}<div class="box"><div class="text">Hello I'm Here lets go</div> </div>