I'm struggling to evenly space four child containers within a single parent container without using Flex/Grid, as I haven't covered those topics yet. I tried setting each child container to 25% width of the parent and centering them with text-align:center. Below is my HTML & CSS along with a screenshot of the in-browser results.
.parent-container {
width: 800px;
height: 400px;
border: solid 1px black;
margin: 0 auto;
}
.alignment-container {
box-sizing: border-box;
width: 25%;
height: 100%;
border: solid 1px black;
text-align: center;
display: inline-block;
margin: 0;
}
.content {
box-sizing: border-box;
width: 50%;
height: 50%;
border: solid 1px black;
}<main>
<div class="parent-container">
<div class="alignment-container"></div>
<div class="content"></div>
<div class="alignment-container"></div>
<div class="content"></div>
<div class="alignment-container"></div>
<div class="content"></div>
<div class="alignment-container"></div>
<div class="content"></div>
</div>
</main>