Span acting like div <p>I have this code, where I planned to have three spans side by side displaying the step a person is at signing up for my website. However, the spans are acting like divs and going onto the next line. I have no idea why this is happening. To my understanding, the spans should only take up the width they need, not an entire line</p> <pre><code> &lt;div class="row stepRow"&gt; &lt;div class="col-12-md "&gt; &lt;div id="stepDisplay"&gt; &lt;span class="stepBlock"&gt; &lt;h3 class="headerStep"&gt;Step 1&lt;/h3&gt; &lt;p class="descStep"&gt;Basic Details&lt;/p&gt; &lt;/span&gt; &lt;span class="stepBlock"&gt; &lt;h3 class="headerStep"&gt;Step 2&lt;/h3&gt; &lt;p class="descStep"&gt;More Details&lt;/p&gt; &lt;/span&gt; &lt;span class="stepBlock"&gt; &lt;h3 class="headerStep"&gt;Step 3&lt;/h3&gt; &lt;p class="descStep"&gt;Payment Details&lt;/p&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>//in seperate css file</p> <pre><code>.stepBlock { display: display; text-align: center; } .headerStep .descStep { display: inline; } </code></pre>