Can't get horizontal columns to work

Question

So I'm trying to span a list across 4 horizontal columns. I set each div to 25% but still not luck. Here's what I got going

<div class="listed">
           <div class="section-one" style="display: inline-block;width: 25%;">
                                        <h3>All Rooms</h3>
                                        <ul>
                                            <li>Dust all furniture</li>
                                            <li>Polish all furniture</li>
                                            <li>Dust all misc. items</li>
                                            <li>Dust all windowsills</li>
                                            <li>Dust ceiling fans</li>
                                            <li>Remove trash</li>
                                            <li>Vacuum carpets</li>
                                            <li>Sweep floors</li>
                                            <li>Mop floors</li>
                                            <li>Dust and sanitize light switches</li>
                                        </ul>
                                    </div>
                                    <div class="section-two" style="display: inline-block;width: 25%;">
                                        <h3>Kitchen</h3>
                                        <ul>
                                            <li>Scrub &amp; sanitize sinks</li>
                                            <li>Scrub &amp; sanitize counters</li>
                                            <li>Place dishes in the dishwasher (if empty)</li>
                                            <li>Clean surfaces</li>
                                            <li>Clean outside of appliances</li>
                                            <li>Clean inside of microwave</li>
                                        </ul>
                                    </div>
                                    <div class="section-three" style="display: inline-block;width:25%;">
                                        <h3>Bedrooms</h3>
                                        <ul>
                                          <li>Make all beds</li>
                                          <li>Change linens</li>
                                        </ul>
                                    </div>
                                    <div class="section-four" style="display: inline-block;width: 25%;">
                                        <h3>Bathrooms</h3>
                                        <ul>
                                          <li>Scrub &amp; disinfect toilets</li>
                                          <li>Scrub &amp; disinfect tubs</li>
                                          <li>Scrub &amp; disinfect showers</li>
                                          <li>Scrub &amp; disinfect sinks</li>
                                          <li>Scrub &amp; disinfect counters</li>
                                          <li>Clean mirrors</li>
                                          <li>Polish chrome</li>
                                        </ul>
                                    </div>
       </div>

I'm also getting a "stair" effect where the columns are lower than others for some reason. Any ideas?

Here's a demo

Answer 1

I was going to propose a float solution, but since that has been mentioned, I'd like to propose a salvaging of your present implementation.

The "stair" effect can be addressed with vertical-align:top, which you can apply like so:

<div class="section-one" style="display: inline-block;width: 25%; vertical-align:top;">

However, the reason why you can't fit 4 columns in one row, despite them each being a width of 25%, is because of the behaviour of inline-block elements. If there is any whitespace between them and a sibling inline or inline-block element, it will be rendered as a space in the browser. (Your last column is getting pushed to the next row because there are a few extra spaces between your columns in the first row.)

There are multiple ways to address this, but the simplest fix is to eliminate the whitespace between the opening/closing tags of adjacent columns. For example:

<div class="section-one" style="display: inline-block;width: 25%; vertical-align:top;">    
    <!-- [section-one content] -->
</div><div class="section-two" style="display: inline-block;width: 25%; vertical-align:top;">
    <!-- [section-two content] -->
</div>

Here's a JSfiddle to demonstrate the fixed code. Hope this helps! Let me know if you have any questions.

Answer 2

Remove the display: inline-block from each div and add

.listed div {
  float: left;
}

To the CSS

inline-block by default has about 4px of invisible margin around it that is why in the case you have at the moment 25*4 = roughly 100%+16px