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:  
```css
.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 one of the following:
```css
	.aui .site-add-controls .icon-plus {
		padding-right: 5px;
	}
```
```css
	.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 (not included in this version)
```css
	.site-add-controls .icon-plus {
		padding-left: 2px;
		padding-right: 3px;
	}
```
```css
	.site-add-controls .nav-item-icon {
		padding-left: 2px;
		padding-right: 3px;
	}
```