I'm currently working on a webpage layout where I want to have a main div centered horizontally with three smaller divs inside, aligned both vertically and horizontally with equal spacing. I tried using margin: auto on an empty div to center it in the main div, but I'm having trouble getting the smaller divs to center within that empty div. It seems like the margins are not taking the parent element into account.
I've experimented with various methods to center the elements, but nothing seems to work for me. I would appreciate it if someone could provide guidance on how to achieve this effect using CSS.
Here is a screenshot of the current layout (the red div will be invisible in the final design): https://i.sstatic.net/gTAqt.jpg
HTML Code:
<html>
<head>
<title>Title Placeholder</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>
<body>
<div id="title"></div>
<div id="introdiv"></div>
<div id="wrapper">
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>CSS Code:
html {
background: ##6f7604;
background-image: url("zenbg-1.png"), url("zenbg-2.png");
background-repeat: repeat-x, repeat;
}
#title {
background-color: rgba(83,188,255,0.6);
min-height: 5%;
width: 90%;
margin: auto;
border: 1px solid #ddd;
}
#introdiv {
background-color: rgba(255,207,76,0.9);
min-height: 15%;
width: 70%;
margin: auto;
margin-top: 2.5%;
border: 1px solid #ddd;
}
#wrapper {
background-color: rgba(83,188,255,0.6);
min-height: 65%;
width: 80%;
margin: auto;
margin-top: 2.5%;
border: 1px solid #ddd;
}
#container {
min-height: 10%;
width: 50%;
background-color: red;
margin: auto;
margin-top: 6.5%;
}
.box {
background-color: rgba(255,207,76,0.9);
min-height: 40%;
width: 20%;
margin-left: 5%;
margin-top: 5%;
border: 1px solid #ddd;
display: inline-block;
}Any help or additional information you may need will be greatly appreciated.