Custom CSS on form block no longer works

I have a form that I customized with CSS to control the width and placement of a series of repetitive fields.   It worked fine before, but apparently the new rollout broke something in my CSS and I haven't been able to figure out how to fix it.   
Url: https://sjmetroband.org/music-request

The repetitive fields "Title", "Part", and "Copies" (which still appear on one line as they should) no longer have any space between the fields so the "margin-right" parameter in my CSS is being ignored.
Here's the CSS:

/* custom code for music request form */
#collection-63aa1c14486ba538a8c8a487{
.field-list {
display: flex;
flex-wrap: wrap;
}
  
/* Item 3 special instructions */
.form-item:nth-child(3) {
width: 100% !important;
} 
/* Name to the left */
.form-item:nth-child(1) {
width: 52%  !important;
margin-right: 4%;
}
/* email to the right */
.form-item:nth-child(2) {
width: 41% !important;
} 
/* Title - part - copies */
.form-item:nth-child(4), .form-item:nth-child(7), .form-item:nth-child(10),  .form-item:nth-child(13), .form-item:nth-child(16)  {
width: 40%  !important;
margin-right: 2%;
}
  
  .form-item:nth-child(5), .form-item:nth-child(8), .form-item:nth-child(11),  .form-item:nth-child(14), .form-item:nth-child(17)  {
width: 25%  !important;
margin-right: 2%;
}
  
.form-item:nth-child(6), .form-item:nth-child(9), .form-item:nth-child(12),  .form-item:nth-child(15), .form-item:nth-child(18)  {
width: 8%  !important;
margin-right: 2%;
}

@spotlightlover Here's the updated code:

#collection-63aa1c14486ba538a8c8a487{
	.field-list {
		display: flex;
		flex-wrap: wrap;
	}
	.form-item:nth-child(3) {
		width: 100% !important;
	} 
	.form-item:nth-child(1) {
		width: 49%  !important;
		margin-right: 2% !important;
	}
	.form-item:nth-child(2) {
		width: 49% !important;
	} 
	.form-item:nth-child(4), .form-item:nth-child(7), .form-item:nth-child(10),  .form-item:nth-child(13), .form-item:nth-child(16)  {
		width: 49%  !important;
		margin-right: 2% !important;
	}
	.form-item:nth-child(5), .form-item:nth-child(8), .form-item:nth-child(11),  .form-item:nth-child(14), .form-item:nth-child(17)  {
		width: 39% !important;
		margin-right: 2% !important;
	} 
	.form-item:nth-child(6), .form-item:nth-child(9), .form-item:nth-child(12),  .form-item:nth-child(15), .form-item:nth-child(18)  {
		width: 8% !important;
	}
}

So the only real change is applying "!important" to the margin-right parameter.  Thanks!

@spotlightlover Yes, I have also adjusted the width of the input boxes to ensure uniform width for all input lines, creating a consistent appearance.