Legend Entry Spacing

Problem:

1) The three legend entries on my desktop view are spread too far apart and are not evenly spaced. Is there a way this can be fixed?
2) The legend is overlapping the "Powered by Zingchart" at lower right hand corner. Can we create a better separation? 
3) I tried to insert "mediarules" code so that when viewed on mobile the legend layout would appear as 1x3. Unfortunately, I couldn't get it to work.

Solution:

1. I've used layout:float to prevent the legend entries from spreading too far apart.
2. Added a marginBottom property to prevent the legend from overlapping the "Powered by Zingchart" watermark.
3. Added mediaRules appropriately so that when viewed on mobile, the legend layout would appear as 3x1.

We've attached an illustration and demo for your reference.

Use layout:float to prevent the legend entries from spreading too far apart. Please use this demo for reference.