Mailchimp Signup Form in Page Header

Hi there,

How are you inserting it? Using shortcode?

Hi Leo,
I insert this code in Page Header

<div id="mc_embed_signup">
    <form action="//heyimcat.us8.list-manage.com/subscribe/post?u=0b5586be71b0fee16a03f5684&id=e41ec18eab" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">

        <!-- Text Input Field -->
        <div class="mc-field-group"><input type="email" placeholder="Your Email" name="EMAIL" class="required email" id="mce-EMAIL"></div>
        <!-- /Text Input Field -->

        <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
        </div><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

        <div style="position: absolute; left: -5000px;"><input type="text" name="b_0b5586be71b0fee16a03f5684_e41ec18eab" tabindex="-1" value=""></div>

        <!-- Submit Button -->
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        <!-- /Submit Button -->
        </div>
    </form>
</div>

and this one in Simple CSS

#mc_embed_signup { border: none; text-align: center; width: 100%; } /* Signup form container */

.mc-field-group { display: inline-block; } /* positions input field horizontally */

#mce-EMAIL { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1em; border: 2px solid #ABB0B2 ; color: #343434; background-color: #fff; padding: .7em 9em .7em 1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block; margin: 0; } /* Input Styles */

.clear { display: inline-block; } /* positions button horizontally in line with input */

.button { font-family: 'Helvetica Neue', Helvetica,  Arial, sans-serif; font-size: 1em; letter-spacing: .03em; color: #fff; background-color: #2386C8 ; padding: .7em 2em; border: 2px solid #2386C8 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block; margin: 0; } /* Button Styles */

:-webkit-input-placeholder { color: #ABB0B2 ; } /* WebKit browsers */ 
:-moz-placeholder { color: #ABB0B2 ; } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #ABB0B2 ; } /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #ABB0B2 ; } /* Internet Explorer 10+ */

@media (max-width: 768px) { /* positions input field and button underneath each other with 100% width for tablet and mobile */
  
.mc-field-group { display: block; max-width: 100%; }
#mce-EMAIL { padding: .7em 0 .7em 1em; width: 96%; margin: 0; }
.clear { display: block; width: 100% }
.button { width: 100%; margin: .5em 0 0 0; }
  
}

but this is the result

instead of this

If you insert the code in normal content does it show up correctly?

No,
also in post, page or section is the same result

Why did you think this is not the correct result?

Have you contacted MailChimp? They should be more familiar with their HTML and CSS.