html - css float not working -

i trying make jquery slider of own. , need list of slides ul float left. not floating.

html:

<div id="slider">   <ul id="slides">     <li class="slide"><img src="http://placehold.it/900x400"></li>     <li class="slide"><img src="http://placehold.it/900x400"></li>     <li class="slide"><img src="http://placehold.it/900x400"></li>     <span class="clear_both"></span>   </ul> </div> 

css:

#content .wrapper #slider #slides .slide {   float: left;   width: 100%; } 

demo @ codepen.io

i have been trying figure out hour, nothing helped me. please me this. grateful you. thank you.

it's working, reason why think not working because container , slides widths 100%. 1 slide per row. if want them side side have make container overflow's x hidden , put child container inside wide slides widths together.