I wanted to place <li> elements which I used in a horizontal menu to be distributed evenly across the full width of the parent element <ul>.  I used to float my elements from left and add margins for the space in between the each element or I used to display:inline-block;  <li> elements and give text-align:center; to the parent <ul>. 

But again it places the items in middle, this was not I was looking for I wanted to distribute the items in complete width form left edge to the right edge.

Following is the css you can use to simply arrange the items from left to the right edge with equal spacing.

ul{ display:block; clear:both; width:70%; display: flex; justify-content: space-between; padding:0; }

display:flex; and justify-content:space-between will do the magic for you.