Carlos K. Carlos K. - 5 months ago 13
HTML Question

How can I fix this css left alignment?

I made every option into a container, so I have 8 containers, from left to right, from top to bottom.

But for some unknown reason, item_container 3 and 4 are not following the alignment!! I've spent hours on this but no good. So frustrating right now.

enter image description here

Here is my html code.

item_container
5~8 are basically the same as 1,2, and they aligned perfectly, so I didn't include them.



.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

There's a missing comma in this line that's probably causing your trouble

.item_container2, .item_container3 .item_container4,