How to display inline <span> inside <div>?

Question

How can I display inline spans inside a div element? I would like to show them inline, and automatically regulating their sizes and the space that they take equally, depends the user's screen, and to be behind all others 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>

Solution

<span> is inline by default, and <div> is block by default. But in your CSS you're overwriting those default styles with display: block (in #main, etc). If you want them to resize as the screen does, and be inline, a better way overall is just to use flexbox:

HTML:

<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>

CSS:

body {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  overflow: scroll;
}

.whole {
  width: 100%;
  height: 400px;
  -ms-display: flexbox;
  display: flex;
  margin: 0px 0px 0px 240px;
}

.whole > span {
  -ms-flex: 1;
  flex: 1;
  height: 100%;
}

#main { 
  background-color: #212121;
}

#second-main { 
  background-color: #424242;
}

#third-main { 
  background-color: #616161;
}

#fourth-main { 
  background-color: #757575;
}

(you were also missing a closing CSS bracket for body, and your font-size: 100% was being overwritten in the very next line by a shorthand font rule)

Here is a working fiddle: https://jsfiddle.net/tceqx58x/