I'm running into a problem while utilizing CSS Flexbox to design a layout with multiple child elements. The issue at hand is that the child elements are not aligning correctly within the parent container. I aim for them to be evenly distributed and centered horizontally, but they are displaying misaligned or with unequal spacing.
The code I've used is as follows:
<div class="parent">
<div class="child">box 1</div>
<div class="child">box 2</div>
<div class="child">box 3</div>
</div>
.parent{
display: flex;
justify-content: center;
}
.child{
margin: 10px;
padding: 10px;
background-color: #ccc;
}
What might be causing this alignment issue? How can I make sure that the child elements are evenly spaced and centered inside the parent container using CSS Flexbox? Any insights or suggestions would be highly appreciated.
The goal is to create space on the left side and distribute any remaining space equally between the elements. The desired result is for the child elements to be evenly distributed and centered both horizontally and vertically within the parent container.