I am struggling with creating 6 horizontal blocks on my webpage with spaces between them. Unfortunately, all the blocks are overlapping each other and there is no visible space in between.
index.html
<div class="a">
<div className="b">
<p>Principle</p>
<p>Amount Spend</p>
<p>Interest</p>
</div>
<div className="c">
<p>Current Price</p>
<p>percentage</p>
<p>Simple Interest</p>
</div>
<div className="d">
<p>Unitary rate</p>
<p>percentage</p>
<p>Invested Amount</p>
</div>
<div className="e">
<p>Unitary rate</p>
<p>percentage</p>
<p>Invested Amount</p>
</div>
<div className="f">
<p>Unitary rate</p>
<p>Unitary rate</p>
<p>Invested Amount</p>
</div>
<div className="g">
<p>Market Vaue</p>
<p>percent of profit value</p>
<p>Unitary rate</p>
</div>
</div>
index.css
.a
{
display: flex;
padding-top: 10px;
}
.b
{
width: 15%;
background-color:#D3D3D3;
}
.c
{
width: 15%;
background-color:#D3D3D3;
}
.d
{
width: 15%;
background-color:#D3D3D3;
}
.e
{
width: 15%;
background-color:#D3D3D3;
}
.f
{
width: 15%;
background-color:#D3D3D3;
}
.g
{
width: 15%;
background-color:#D3D3D3;
}
p{
padding-left: 18px;
line-height: 20%;
padding-top: 8px;
padding-bottom: 8px;
}
https://i.sstatic.net/wWiDM.png
As shown in the image screenshot provided, all the blocks lack proper spacing. I would appreciate any advice or suggestions on how to adjust this code since I am still a beginner in coding.