Horizontally stacking LIs

by karim79

HTML

<div id="main">
    <div class="inner">
                                    <ul>
                                        <li>
                                            <img src="http://i.ebayimg.com/00/$(KGrHqN,!rkE88hC-)(oBPUf1ykM-g~~_27.JPG"/>
                                        </li>
                                        <li>
                                            <img src="http://i7.ebayimg.com/02/m/000/8c/bc/8c38_27.JPG"/>
                                        </li>
                                        <li>
                                            <img src="http://i.ebayimg.com/04/!!rfLtN!BW0~$(KGrHqMOKicEtiP(bqciBL,pV+8GjQ~~_27.JPG"/>
                                        </li>                                
                                    </ul>
    </div>
</div>

CSS

#main {
    overflow: hidden;
    float: left
    position: relative;
    list-style: none;
}

.inner {
        //overflow: hidden;
    //float: left
    //position: relative;
    
}


ul {
    list-style: none;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
}

li {
    //box-sizing: border-box;
    display: block;
    float: left;
    width: 300px;
    height: 160px;
    text-align: center;
    //font-family: georgia;
    //font-size: 18px;
    //line-height: 140%;   
}

img {
    //height: 300px;               
}