Registration form, added fields uneven

[FB6]

I added fields to my registration form, however, I am unable to align them. What am I doing wrong?

Here is my code, which I changed in the main-register.liquid:

{{ 'customer.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}

.field-group {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 20px;
}

.field-group .field {
flex: 1 1 calc(50% - 10px);
min-width: 0;
position: relative; /* Fix alignment issues with labels */
}

.field-full {
width: 100%;
margin-bottom: 20px;
}

input {
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
width: 100%;
margin: 0;
}

label {
margin-bottom: 5px;
font-size: 14px;
display: inline-block;
}

.field {
margin: 0; /* Remove excess margin causing the extra box */
}

@media screen and (max-width: 600px) {
.field-group .field {
flex: 1 1 100%; /* Stack fields on mobile with full width */
}
}

{%- endstyle -%}

<div class="customer register section-{{ section.id }}-padding">
<h1>{{ 'customer.register.title' | t }}</h1>

{%- form 'create_customer', novalidate: 'novalidate' -%}
{%- if form.errors -%}
<h2 class="form__message" tabindex="-1" autofocus>
<span class="svg-wrapper">
{{- 'icon-error.svg' | inline_asset_content -}}
</span>
{{ 'templates.contact.form.error_heading' | t }}
</h2>
<ul>
{%- for field in form.errors -%}
<li>
{%- if field == 'form' -%}
{{ form.errors.messages[field] }}
{%- else -%}
<a href="#RegisterForm-{{ field }}">
{{ form.errors.translated_fields[field] | capitalize }}
{{ form.errors.messages[field] }}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}

<!-- First Name & Last Name -->
<div class="field-group">
<div class="field">
<input type="text" name="customer[first_name]" id="RegisterForm-FirstName" required placeholder="First Name *">
<label for="RegisterForm-FirstName">First Name</label>
</div>
<div class="field">
<input type="text" name="customer[last_name]" id="RegisterForm-LastName" required placeholder="Last Name *">
<label for="RegisterForm-LastName">Last Name</label>
</div>
</div>

<!-- Company & Mobile/Landline -->
<div class="field-group">
<div class="field">
<input type="text" name="customer[note][Company]" id="RegisterForm-Company" placeholder="Company (Optional)">
<label for="RegisterForm-Company">Company (Optional)</label>
</div>

<div class="field">
<input type="tel" name="customer[note][Phone]" id="RegisterForm-Phone" required placeholder="Mobile/Landline Number *">
<label for="RegisterForm-Phone">Mobile/Landline Number *</label>
</div>
</div>

<!-- Street Address & City Side by Side -->
<div class="field-group">
<div class="field">
<input type="text" name="customer[note][Street Address]" id="RegisterForm-Street" required placeholder="Street Address *">
<label for="RegisterForm-Street">Street Address *</label>
</div>
<div class="field">
<input type="text" name="customer[note][City]" id="RegisterForm-City" required placeholder="City *">
<label for="RegisterForm-City">City *</label>
</div>
</div>

<!-- County & Country Side by Side -->
<div class="field-group">
<div class="field">
<input type="text" name="customer[note][County]" id="RegisterForm-County" required placeholder="County *">
<label for="RegisterForm-County">County *</label>
</div>
<div class="field">
<input type="text" name="customer[note][Country]" id="RegisterForm-Country" required placeholder="Country *">
<label for="RegisterForm-Country">Country *</label>
</div>
</div>

<!-- Password & Confirm Password -->
<div class="field-group">
<div class="field">
<input type="password" name="customer[password]" id="RegisterForm-password" placeholder="Password *">
<label for="RegisterForm-password">Password *</label>
</div>
<div class="field">
<input type="password" name="customer[password_confirmation]" id="RegisterForm-password-confirm" required placeholder="Confirm Password *">
<label for="RegisterForm-password-confirm">Confirm Password *</label>
</div>
</div>

<button>
{{ 'customer.register.submit' | t }}
</button>
{%- endform -%}
</div>

{% schema %}
{
"name": "t:sections.main-register.name",
"settings": [
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}

 

[NerdCurator]

@FB6  Can you please provide the URL of your store and if it is password protected please share the password too. Thanks

[FB6]

@NerdCurator thanks for the reply,

here is my URL: https://cioffimporters.com/
Pw: shawni1!

[NerdCurator · Accepted solution]

@FB6  You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of customer.css file.

.customer .field:first-of-type{
margin-top:0 !important;
}