Menu Customizer: menu name field top margin collapses in Chrome

[afercia]

Noticed just in Chrome. When reordering or deleting menu items, the margin above the menu name field collapses:

To me, this seems a Chrome's bug, specifically when it has to recalculate the nth-child selector. To debug, try to add something like this:

#customize-theme-controls .control-section .accordion-section-content > li.customize-control:nth-child(3) {
	outline: 2px solid red;
}

and you should see the first menu item with a red outline. Now reorder the menu items, do it multiple times. While Firefox always displays the red outline on the first item, Chrome (at least Chrome 43 on Windows) sometimes shows the outline, sometimes not. I guess in the same way it doesn't re-apply the 12px top margin on the menu name input field. See

#customize-theme-controls .control-section .accordion-section-content > li.customize-control:nth-child(2) {
	margin-top: 12px;
}

in customize-controls.css. In fact, looks like just not using nth-child(2) fixes the margin issue.

[afercia]

The proposed patch should be tested by someone more familiar than me with the CSS intricacies of the Customizer. Not sure if there would be side effects.

[celloexpressions]

+1 for this patch. It is possible that there may be side effects from this change, but this was introduced in 4.3 and the patch makes it much better - this is how this should be done. If we do come across additional issues after this change, we can fix them, but this is a step in the right direction.

[helen]

In 33297:

Customizer: Ensure consistent margins in sections.

Since the customizer dynamically changes, nth-child selectors are not always a great idea.

props afercia.
fixes #32902.