Imagine having a container with the following dimensions:
.container {
width: 960px;
margin: 0 auto;
height: 500px;
}
Now, envision wanting to add three boxes in the center aligned horizontally with these specifications:
.box1 {
background-color: #000;
width: 300px;
height: 200px;
}
.box2 {
background-color: #999;
width: 300px;
height: 200px;
}
.box3 {
background-color: #333;
width: 300px;
height: 200px;
}
I attempted using margins for positioning, but it became messy and challenging to achieve equal alignment with sufficient space between them. What would be the most efficient way to accomplish this layout?