LPS-42902 The control's items are not aligned with each other

Hi Byran, 

For this CSS fix, what I've done is set the padding-right for the icon in the specific 'li.site-add-controls' to be 4px.

I did it this way because the misalignment appears to be as a result of the width of 'icon-plus' being 18px whereas the other icons have a width of 22px. So by setting the padding-right, the items are able to all be in alignment with one another, even if you collapse the font-size of 22px that is set elsewhere (see .custom_responsive:75).

Additionally, I know we are moving to a mobile first pattern, but Rob recently told me this part of dockbar.css hasn't been updated to that yet, so I went ahead and used respond-to(phone, tablet). 

Let me know if this seems like the best way to do this. Thanks : )