Horizontal list with image and text css

Question

I have a problem with horizontal list... It was supposed to be a horizontal list and not a vertical list...

My html code is:

<section id="services">
    <header> 
        <h1>Serviços</h1>
    </header>
    <section>
        <ul>
            <li>
                <span class="webdesign"/>
                <h1>
                    <span>01.</span>
                    Webdesign 
                </h1>
            </li>
            <li>
                <span class="graphicdesign"/>
                <h1>
                    <span>02.</span>
                    Graphic design 
                </h1>
            </li>
            <li>
                <span class="webdeveloper"/>
                <h1>
                    <span>03.</span>
                    Web Developer
                </h1>

        </ul>
    </section> </section>

and CSS code is:

 /* services */

#services ul {  margin-top: 70px; }

ul {  line-height: 1.6; list-style-position: inside; margin-bottom: 17px; }

#services ul li {  list-style: none outside none; width: 25%; }

li {  display: list-item;  }

#services ul li h1 {  font-family: "LithosPro"; font-size: 12px; font-weight: 400; margin-top: 15px; text-align: center; text-transform: uppercase; }

#services ul li > span.webdesign:hover {  background-position: 0px -233px; }

#services ul li > span.graphicdesign {  background-position: -255px 0px; }

#services ul li > span.graphicdesign:hover {  background-position: -255px -233px; }

#services ul li > span.webdeveloper {  background-position: -528px 5px; }

#services ul li > span.webdeveloper:hover {  background-position: -528px -227px; }

#services ul li h1 span {  color: #FE4A4A; font-family: "amatic_scbold"; }

#services ul li > span {  background: url("../images/star.png") no-repeat transparent; display: block; height: 215px; width: 235px; }

If someone can help me, i appreciate!

Answer 1

just set display:inline-block; on your #services ul li

JSFIDDLE