I am stumped by basic stuff.
Why are the block level elements inside <li> hindering how i want the<li> to be displayed. I am basically looking to turn this vertical list to a horizontal one.
Block level elements will take up 100% of the width of its parent by default. The list will let block level elements fill up its parent too, all the way up until there’s a width declared on something.
You would need to apply a width to the .legend ul li, or for specificity’s sake you can just give each li its own class (it’s faster during render that way too).