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

[LPS-42902](https://issues.liferay.com/browse/LPS-42902)

* No merge conflicts
* Works in IE9, IE10, IE11, Chrome and Firefox
* No regression bugs

Changes from [original pull request](https://github.com/blzaugg/liferay-portal/pull/92):
* Padding-right for the plus icon should be 5px (not 4px) to make it 22px by 22px like the other icons
* Perhaps use ".icon-plus" instead of ".nav-item-icon" because it is more specific -- both work in the same way
* Reduce selector weight for the added code. This change isn't overriding any current rules, so it isn't necessary to have so many selectors. 
  * Because of the nesting, the previous fix was equivalent to:
.aui {
	.dockbar-split {
		.dockbar {
			@include respond-to(phone, tablet) {
				.container-fluid > .nav > li.dropdown .dropdown-menu li.site-add-controls a .nav-item-icon {
					padding-right: 4px;
				}
			}
		}
	}
}
  * But it is possible to have just :
	.aui .site-add-controls .icon-plus {
		padding-right: 5px;
	}
	OR
	.aui .site-add-controls .nav-item-icon {
		padding-right: 5px;
	}
* Could do padding-left and padding-right (split the amount) to center the icon if that is preferrable
	.site-add-controls .icon-plus {
		padding-left: 2px;
		padding-right: 3px;
	}
	OR
	.site-add-controls .nav-item-icon {
		padding-left: 2px;
		padding-right: 3px;
	}