Problems with Header fields as screen size changes

I'm having a couple problems with my Header fields when the screen size changes.

1. Headers are changing positions relative to other fields as screen size changes.

The Enter Shipping and Contact Data header is where it should be at this screen size:

The header is way out of position at this screen size:

At this screen size, it's still out of position, but in a different place:

The header appears at various places as the screen size changes by a small number of pixels at several other points as well.

2. At a certain screen size, the header text no longer fits within the header background.

The word, Sails, is outside of the Header field's (Order Mad Flying Scot Sails) background at some screen sizes:

But it's okay at sizes larger than 480:

Please note that I have just submitted another question on the same form relating to problems at various screen sizes.  Perhaps changes to deal with the two posts will need to be coordinated.

Please help me with the needed CSS. Thanks!

The page you shared shows 404 not found.

Regarding the main issue, the problem with your header style is caused by your custom CSS codes that uses fixed width and height. This creates an issue when viewed on smaller screens. We'll work on a CSS that would fix it. We'll keep in touch.

Here, inject these CSS codes to your form to make it responsive at max screen width 768px. Put it at the very bottom.

@media screen and (max-width:768px){

.form-all {

    width: 100% !important;

    border:none !important

}

div#text_320 p {

    width: 100% !important;

    margin: 0 !important;

}

.form-header-group {

    height: auto !important;

    width: 100% !important;

    }

label#label_298 {

    width: 100% !important;

    box-sizing: border-box;

}

div#text_317 p {

    margin: 0 !important;

    text-align: center;

}

div#text_317 p span{

    font-size: 14px !important;

    display: inline-block;

    box-sizing: border-box;

        margin: 0 !important;

}    

div.form-header-group{

    margin-left: 0 !important;

    margin-right: 0 !important;

}

.header-text {

    height: auto !important;

    padding: 10px !important;

}

.form-product-item > img + .form-product-item-detail {

    width: 100% !important;

}

#id_185, #id_269, #id_272, #id_318, #id_324, #id_325 {

    margin: 0 !important;

    margin-bottom: 10px !important;

    box-sizing: border-box;

}

}

Please let us know if you still need further assistance.

 I had a problem that prevented you from seeing the form that I'm working on.  It's now been fixed.  Please look at that form (link below).  I thing your code above was created assuming I was working on a similar, older form from my account.  Thanks.

https://www.madsails.com/Order_FS_sailsTest.html

You may also try the next CSS to fix the size and positioning of the Header fields:

[data-type="control_head"] {
display: block !important;
}
.header-text {
min-height: 35px;
height: auto;
}
.form-header-group {
margin-left: 0;
margin-right: 0;
}

Thanks, Mike. That seemed to do the trick.