Is there a way to showcase inline spans within a div element while ensuring they are displayed equally in size and space, based on the user's screen? And how can I ensure that these spans are positioned behind other div elements?
body {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
overflow: scroll;
.whole {
width: 100%;
height: 400px;
display: inline-block;
margin: 0px 0px 0px 240px;
z-index: -1;
position: relative;
}
#main {
background-color: #212121;
width: 50%;
height: 400px;
display: block;
}
#second-main {
background-color: #424242;
width: 50%;
height: 400px;
display: block;
}
#third-main {
background-color: #616161;
width: 50%;
height: 400px;
display: block;
}
#fourth-main {
background-color: #757575;
width: 50%;
height: 400px;
display: block;
} <div class = "whole">
<span id="main">
<p></p>
</span>
<span id="second-main">
<p></p>
</span>
<span id="third-main">
<p></p>
</span>
<span id="fourth-main">
<p></p>
</span>
<span id="fifth-main">
<p></p>
</span>
</div>