Float left not working when used nth-child

HTML:

CSS:

Output in chrome:

The problem here is that the last div floats to left instead of floating to right I'm confused what's the reason for floating to left? background-color property works fine and gives the div red color but the float property is'nt working