CSS Weird behavour with nth-of-type(even or odd)

Question

I have some css selectors to style every even and every odd occurance but for whatever reason the odd even selection is switch for a particular set of elements which are inside a div

As you can see "How Often should have a turquoise border but it doesn't, If anyone knows why this is happening it would be much appreciated if you could give me an answer

here is an example of the CSS & HTML

.profile-container .input-container:nth-of-type(even){
    border: 2px solid gold;
}

.profile-container .input-container:nth-of-type(odd){
    border: 2px solid turquoise;
}

<div class="page-title">
    <h1>Customer</h1>
    <button class="" tabindex="0" type="button">
        Delete
    </button>
</div>
<div class="profile-container">
    <div class="input-container"><label>First Name</label></div>
    <div class="input-container"><label>Last Name</label></div>
    <div class="input-container"><label>Email</label></div>
    <div class="input-container"><label>Phone</label></div>
    <div class="input-container"><label>Customer Id</label></div>
    <div class="input-container"><label>Sub Id</label></div>
    
    <div style="margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;">
        <div class="page-title" style="max-width: unset; margin-left: 0px;">
            <h1>Subscription</h1>
            <button class="" tabindex="0" type="button">
                Cancel Subscription
            </button>
        </div>
        
        <div class="input-container"><label>How Often</label></div>
        <div class="input-container"><label>Inside Cleaning</label></div>
        <div class="input-container"><label>intro price</label></div>
        <div class="input-container"><label>Price</label></div>
    </div>
    
    <div style="margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;">
        <div class="input-container"><label>Address</label></div>
        <div class="input-container"><label>Postal Code</label></div>
        <div class="input-container"><label>City</label></div>
        <div class="input-container"><label>Size(m<sup>2</sup>)</label></div>
        <div class="input-container"><label>Stories</label></div>
        <div class="input-container"><label>type</label></div>
    </div>
</div>

EDIT: When i remove this (The Subscription page title) it actually works as expected

<div class="page-title" style="max-width: unset; margin-left: 0px;">
  <h1>Subscription</h1>
  
  <button class="" tabindex="0" type="button">
    Cancel Subscription
  </button>
</div>

.profile-container .input-container:nth-of-type(even){
    border: 2px solid gold;
}

.profile-container .input-container:nth-of-type(odd){
    border: 2px solid turquoise;
}

<div class="page-title">
    <h1>Customer</h1>
    <button class="" tabindex="0" type="button">
        Delete
    </button>
</div>
<div class="profile-container">
    <div class="input-container"><label>First Name</label></div>
    <div class="input-container"><label>Last Name</label></div>
    <div class="input-container"><label>Email</label></div>
    <div class="input-container"><label>Phone</label></div>
    <div class="input-container"><label>Customer Id</label></div>
    <div class="input-container"><label>Sub Id</label></div>
    
    <div style="margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;">
        <div class="page-title" style="max-width: unset; margin-left: 0px;">
            <h1>Subscription</h1>
            <button class="" tabindex="0" type="button">
                Cancel Subscription
            </button>
        </div>
        
        <div class="input-container"><label>How Often</label></div>
        <div class="input-container"><label>Inside Cleaning</label></div>
        <div class="input-container"><label>intro price</label></div>
        <div class="input-container"><label>Price</label></div>
    </div>
    
    <div style="margin-top: 20px; border-top: 1px dashed grey; padding-top: 20px;">
        <div class="input-container"><label>Address</label></div>
        <div class="input-container"><label>Postal Code</label></div>
        <div class="input-container"><label>City</label></div>
        <div class="input-container"><label>Size(m<sup>2</sup>)</label></div>
        <div class="input-container"><label>Stories</label></div>
        <div class="input-container"><label>type</label></div>
    </div>
</div>