html - 我该如何修复这个 css 左对齐？

Question

我把每个选项都做成了一个容器，所以我有 8 个容器，从左到右，从上到下。

但由于某些未知原因，item_container 3 和 4 没有对齐!!我在这上面花了几个小时，但没有用。现在很沮丧。

这是我的 html 代码。 item_container 5~8和1,2基本一样，而且对齐的很完美，所以没有包含。

.page_item {
	display: inline-block;
	margin-left: 28px;
	margin-right: 8px;
	margin-bottom: 1px;
}

.page_field {
	display: inline-block;
	margin-right: 68px;
	margin-bottom: 1px;
}

.page_check_field {
	display: inline-block;
	margin-right: 8px;
	margin-bottom: 1px;
}

.page_container {
	display: block;
	width: 876px;
	height: 74px;
}

.page_container .item_container1, .page_container .item_container2, .page_container .item_container3, .page_container .item_container4, .page_container .item_container5, .page_container .item_container6, .page_container .item_container7, .page_container .item_container8 {
	display: inline-block;
}

.item_container1, .item_container2, .item_container3 .item_container4, .item_container5, .item_container6, .item_container7, .item_container8 {
	display: inline-block;
	width: 436px;
}

<div class="page_container">
			<div class="item_container1">
				<h6 class="page_item">User ID</h6>
				<div class="page_field form-group form-group-label">
					<label class="page_entry floating-label" for="..."> Entry User ID </label>
					<input class="form-control" id="..." type="text">
				</div>
			</div>
			<div class="item_container2">	
				<h6 class="page_item">Country</h6>
				<div class="page_field form-group form-group-label">
					<select class="page_entry form-control" id="...">
						<option value="..."> Select </option>
						<option value="..."> Country 1 </option>
						<option value="..."> Country 2 </option>
						<option value="..."> Country 3 </option>
						<option value="..."> Country 4 </option>
						<option value="..."> Country 5 </option>
						<option value="..."> Country that has very long name </option>
					</select>
				</div>
			</div>
		</div>
		
		<div class="page_container">
			<div class="item_container3">
				<h6 class="page_item">Email</h6>
				<div class="page_field form-group form-group-label">
					<label class="floating-label" for="..."> Entry User Email </label>
					<input class="form-control" id="..." type="text">
				</div>
			</div>
			<div class="item_container4">
				<h6 class="page_item">User Type</h6>
				<div class="page_check_field">
					<div class="checkbox checkbox-adv">
						<label for="check1">
						<input class="access-hide" id="check1" name="check1" type="checkbox">Cosplayer
						<span class="checkbox-circle"></span>
						<span class="checkbox-circle-check"></span>
						<span class="checkbox-circle-icon icon">done</span>
						</label>
					</div>
				</div>
				<div class="page_check_field">
					<div class="checkbox checkbox-adv">
						<label for="check2">
						<input class="access-hide" id="check2" name="check2" type="checkbox">Cameraman
						<span class="checkbox-circle"></span>
						<span class="checkbox-circle-check"></span>
						<span class="checkbox-circle-icon icon">done</span>
						</label>
					</div>
				</div>
				<div class="page_check_field">
					<div class="checkbox checkbox-adv">
						<label for="check3">
						<input class="access-hide" id="check3" name="check3" type="checkbox">Organizer
						<span class="checkbox-circle"></span>
						<span class="checkbox-circle-check"></span>
						<span class="checkbox-circle-icon icon">done</span>
						</label>
					</div>
				</div>
			</div>
		</div>

Answer 1

此行中缺少一个逗号，这可能是您遇到问题的原因

.item_container2, .item_container3 .item_container4,